×
無料のユーザー登録
をすると学習状況を管理することができるようになります
ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
トップ
/
マイページ
/
レッスン一覧
/
Sass/SCSS入門
Sass/SCSS入門
(全15回)
CSSを効率的に書くための記法であるSass/SCSSについて学んでいきます。
このレッスンでは
ruby 1.9.3p125
/
sass 3.2.3
を使用しています。
動画レッスン一覧
(15)
補足情報一覧
(4)
未完了
#01 Sassとはなにか?
(02:59)
Sassの概要
公式サイト
事前に必要となる知識
レッスンでの環境とSassのインストール
未完了
#02 はじめてのSass
(02:59)
動作の基本
.scssファイルの作成
sassによる変換
結果の確認
変換オプション --style expanded
未完了
#03 自動で変換させてみよう
(01:49)
--watchオプション
動作確認
未完了
#04 入れ子構造を使ってみよう
(02:50)
入れ子構造
コメント記法(/* ... */, //)
&記号
未完了
#05 変数を使ってみよう
(02:38)
変数の宣言と初期化
変数の使い方
演算子
動作確認
未完了
#06 文字列を扱ってみよう
(02:13)
変数の宣言と初期化
変数の利用
文字列の連結 +
#{}記法
未完了
#07 色を扱ってみよう
(02:41)
変数の宣言と初期化
変数の利用
lighten / darken
built-in functions
未完了
#08 @if文を使ってみよう
(02:42)
真偽型の変数
@if ... @else
比較演算子
未完了
#09 @for, @while文を使ってみよう
(02:28)
@for文
@while文
未完了
#10 リストを扱ってみよう
(02:28)
リストの宣言
@each文
未完了
#11 関数を使ってみよう (1)
(02:20)
@function文
@return
未完了
#12 関数を使ってみよう (2)
(02:55)
ローカル変数
@debug
未完了
#13 ファイルを分離させてみよう
(02:24)
partials
@import
未完了
#14 @mixinを使ってみよう
(02:44)
@mixin
@include
引数
引数の初期値
未完了
#15 @extendを使ってみよう
(02:43)
@extend
@extendと@includeの違い
#01 Sassとはなにか?
2013年9月9日
補足情報
あわせて見ておきたいサイトについて
Sassの公式サイトはこちらです。
http://sass-lang.com/
また詳細なリファレンスはこちらから。
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
2012年11月21日
補足情報
LESSのレッスンについて
Sassとよく比較されるLESSのレッスンはこちらです。どちらも同じようにCSSを効率的に書くことができます。
http://dotinstall.com/lessons/basic_less
#07 色を扱ってみよう
2012年11月21日
補足情報
組み込み関数の一覧について
Sassに組み込まれている関数の一覧は以下から見ることができます。一度ざっと見ておくと良いでしょう。
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
#09 @for, @while文を使ってみよう
2013年9月9日
補足情報
ループ範囲の指定方法について
@forによるループの範囲は、「from m through n」の他に「from m to n」で書くこともできます。ただし、前者の場合は「mからnまで」、後者の場合は「mから(n-1)まで」という違いがあります。
「@for $i from 1 through 3」だったら$iは「1, 2, 3」になり、「@for $i from 1 to 3」だったら$iは「1, 2」になります。
お知らせ
04/26
無料レッスンの素材ファイルがダウンロードできるようになりました
もっと見る
全ユーザーの学習状況
完了済
2,385
学習中
5,119
閲覧数
227,268
あわせて読みたい
Web制作者のためのSassの教科書
Sassの導入方法から基礎的な使い方、Compassを含めた利用方法まで、図解とともに丁寧に紹介されています。
このレッスンについて
最終更新日
2013年7月18日
(1743日前)
バージョン情報
ruby 1.9.3p125 / sass 3.2.3
関連キーワード
(5)
基礎講座
(223)
初心者向け
(231)
Sass
(2)
SCSS
(2)
ウェブサイト構築
(110)
このレッスンを共有する
補足情報 あわせて見ておきたいサイトについて
http://sass-lang.com/
また詳細なリファレンスはこちらから。
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html