参考URL
公式サイト
sassで使える関数
sassの導入
ruby方式で書くsassが初めに導入されたがデザイナーに不評の為
scssが導入された。
gem update --system
gem install sass
scss compile
基本的なコンパイル
sass main.scss:maincss
インデント綺麗にコンパイル
sass -style expanded scss/main.scss/css/main.css
scssの監視して更新されたら自動コンパイル
sass --style expanded -watch sass:css
コメントの書き方
// コメントがcssに表示されない
/* コメントがscssに表示される */
書き方
アクション要素 &
span{
background-color: #464646;
&:hover {
font-weight: bold;
}
}
変数(数値、文字列、真偽、色、リスト)
宣言
$baseFontSise: 14px;
計算
#{...}
は{ }内を評価しろという指示。
scss
$baseFontSise: 14px;
font-size: $baseFontSise - 2px;
font-size: #{$baseFontSise - 2px};
css
font-size: 12px;
文字列の連結
scss
$imgDir: "../img/";
background: url($imgDir + "bg.png");
// or
background: url("#{$imgDir}bg.png");
css
background: url("../img/bg.png");
色
scss
$brandColor: rgba(255,0,0,9);
lighten (darken)
scss
color: lighten($brandColor, 30%);
css
color: #ff9999;
条件分岐
scss
$debugMode: true;
@if $debugMode == true{
color: red;
} @else if $debugMode == false {
color: green;
} @else {
color: black;
}
css
color: red;
loop
for
scss
@for $i from 10 through 14 {
.fs#{$i} {font-size: 10px;}
}
css
.fs12 {
font-size: 10px;
}
.fs13 {
font-size: 10px;
}
.fs14 {
font-size: 10px;
}
while
scss
$i: 15;
@while $i < 18 {
.fs#{$i} {font-size: 10px;}
$i: $i + 1;
}
css
.fs15 {
font-size: 10px;
}
.fs16 {
font-size: 10px;
}
.fs17 {
font-size: 10px;
}
list
scss
$animals: cat, dog, tiger;
@each $animal in $animals {
.#{$animal}-icon { background: url("#{$animal}.png");}
}
css
.cat-icon {
background: url("cat.png");
}
.dog-icon {
background: url("dog.png");
}
.tiger-icon {
background: url("tiger.png");
}
debug
scss
@debug $columnWidth;
shell
DEBUG: 932px
関数
scope
$totalWidth
と$columnCount
はglobal変数
@function 内の変数はfuction内のみ
scss
$totalWidth: 940px;
$columnCount: 10;
@function getColumnWidth($width, $count) {
$padding: 10px;
$columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
@debug $columnWidth;
@return $columnWidth;
}
.grid {
float: left;
width: getColumnWidth($totalWidth, $columnCount);
}
css
.grid {
float: left;
width: 85px;
}
fileの分割
作成
_settings.scss
_functions.scss
scss
@import 'settings';
@import 'functions';
mixin(ミックスイン)
scss
@mixin round($radius:4px) {
border-radius: $radius;
}
.label {
font-size: 12px;
@include round(5px);
}
css
.label {
font-size: 12px;
border-radius: 5px;
}
extend(継承)
mixin
との違いは継承していることを明示的にできることと、
mixinの場合include
のした内容を重複してCSSに記載する為、効率的でない。
scss
.msg {
font-size: 12px;
font-weight: bold;
padding: 2px 4px;
color: white;
}
.errorMsg {
@extend .msg;
background: red;
}
.warningMsg {
@extend .msg;
background: orange;
}
css
.msg, .errorMsg, .warningMsg {
font-size: 12px;
font-weight: bold;
padding: 2px 4px;
color: white;
}
.errorMsg {
background: red;
}
.warningMsg {
background: orange;
}