SCSS　まとめ１（基本文法）

ulmargin:10pxlimargin-top:5px

ul{margin:10px;li{margin-top:5px;}}

ul{margin:10px;li{margin-top:5px;&.left{margin-left:5px;}}}//トランスパイル後ul{margin:10px;}ulli{margin-top:5px;}ulli.left{margin-left:5px;}

main{//１行ずつコメント//border: 1px solid #000;/* 複数行コメント *//*
  margin: 10px;
  */}

$basic_color:#000000;$basic_font-size:14px;.car{color:$basic_color;font-size:$basic_font-size;}//トランスパイル後.car{color:#000000;font-size:14px;}

$img_path:'../img/';.item{background:url(#{$img_path}back.png);}//トランスパイル後.item{background:url(#../img/back.png);}

$width:100px;.box1{$width:200px;width:$width;}.box2{width:$width;}//トランスパイル後//グローバル変数の値は変わらない.box1{width:200px;}.box2{width:100px}

$width:100px;.box1{$width:200px!default;width:$width;}//トランスパイル後.box1{width:100px;}

$width:100px;.box1{$width:200px!global;width:$width;}.box2{width:$width;}//トランスパイル後.box1{width:200px;}.box2{width:200px;}

$base_width:100px;.base{/* 加算 */width:$base_width+10px;/* 減算 */width:$base_width-5px;/* 乗算 */width:$base_width*2;/* 除算 */width:$base_width/2;/* 剰余 */width:$base_width%3;}//トランスパイル後.base{/* 加算 */width:110px;//(100px + 10px)/* 減算 */width:95px;//(100px - 5px)/* 乗算 */width:200px;//(100px * 2)/* 除算 */width:50px;//(100px / 2) /* 剰余 */width:1px;//(100px % 3)}

//色々な書き方が可能@importurl(common.scss);@importurl("common.scss");@import"common.scss";@import'common.scss';

//数値(Number)型$number1:10;$number2:1.1;$number3:100px;$number4:50%;$number5:2em;//真偽(Boolean)型$boolean1:true;$boolean2:false;//色(Color)型$color1:blue;$color2:#ff0000;$color3:rgba(255,255,0,0.5);$color4:hsla(110,100%,30%,70%);//文字列(String)型$string1:'Sass';//シングルクォートで囲まれた文字$string2:"scss";//ダブルクォートで囲まれた文字$string3:auto;//配列(List)型$list1:'hoge''fuga''piyo';//スペースで区切る$list2:red,blue,yellow;//カンマで区切る$list3:(10px)(20px)(30px);//カッコで区切る$list4:('hoge''fuga''piyo');//カッコで囲んでもOK$list5:['hoge''fuga''piyo'];//カギカッコで囲んでもOK$list6:[[black,lime,fuchsia,olive],[blue,aqua],[yellow,red]];//多重配列もOK//連想配列(Map)型$map1:(google:'https://www.google.com/',yahoo:'https://www.yahoo.co.jp/',amazon:'https://www.amazon.co.jp/');//関数(Function)型@functionmyFunction($val:1){@return$val*100;}//Null型$null1:null;

$colors:red,blue,yellow;//配列　単体を取得main{color:nth($colors,1);//配列のインデックス番号は1からスタートする}//トランスパイル後main{color:red;}//配列　複数を取得@each$colorin$colors{.#{$color}-bg{background:#{$color};}}//トランスパイル後.red-bg{background:red;}.blue-bg{background:blue;}.yellow-bg{background:yellow;}

$colors:(color1:red,color2:blue,color3:yellow);//連想配列　単体を取得main{color:map-get($colors,'color1');}//トランスパイル後main{color:red;}//連想配列　複数を取得//ここで書かれてある$key, $colorは、連想配列のKeyとValueに対応してある(任意の変数名を設定可能)@each$key,$colorin$colors{.#{$key}{color:$color;}}//トランスパイル後.color1{color:red;}.color2{color:blue;}.color3{color:yellow;}

$var:1;main{@if$var==0{color:red;}@elseif$var==1{color:blue;}@else{color:yellow;}}//トランスパイル後main{color:blue;}

//@for//@for ~ through@for$valfrom0through2{.frame_#{$val}{z-index:$val;}}//@for ~ to@for$valfrom0to2{.frame_#{$val}{z-index:$val;}}//トランパイル後.frame_0{z-index:0;}.frame_1{z-index:1;}.frame_2{z-index:2;}

//@while$val:3;@while$val>0{.frame_#{$val}{z-index:$val;}$val:$val-1;}//トランスパイル後.frame_3{z-index:3;}.frame_2{z-index:2;}.frame_1{z-index:1;}

//@each$images:'hoge''fuga''piyo';@each$imagein$images{.box-#{$image}{background-image:url(../img/#{$image}.png);}}//トランスパイル後.box-hoge{background-image:url(../img/hoge.png);}.box-fuga{background-image:url(../img/fuga.png);}.box-piyo{background-image:url(../img/piyo.png);}

.box1{width:100px;}.box2{@extend.box1;height:200px;}//トランスパイル後.box1,.box2{width:100px;}.box2{height:200px;}

@mixinbox($width:100px,$bgcolor:#000){width:$width;background:$bgcolor;}.box1{@includebox;}.box2{@includebox(200px,#ff0000);}//トランスパイル後.box1{width:100px;background:#000;}.box2{width:200px;background:#ff0000;}