Sassを学んで、効率よくCSSを書く | HTML/CSSが書ける人向け

CSSプリプロセッサのSassを学ぶトレーニングを実施しました。
Sassを学んで、効率よくCSSを書く | HTML/CSSが書ける人向け

当日のアジェンダ

• 最近のフロントエンドエンジニア


• Sassとは


• 必要なモノのインストール


• Sassを書いてみる

トレーニングの資料

書いたSassファイル


/* Sassの特徴
* ネスト記法
* 変数
* @mixin
* @extend
* @import
*/
@import 'test2';
$fontS:10px;
$fontM:14px;
$fontL:18px;

@mixin textCenter{
text-align: center;
margin:0 auto;
}
@mixin BoxShadow($sizeX, $sizeY){
box-shadow:$sizeX $sizeY rgba(0,0,0,0.6);
-webkit-box-shadow:$sizeX $sizeY rgba(0,0,0,0.6);
-moz-box-shadow:$sizeX $sizeY rgba(0,0,0,0.6);
}

#test{
text-align:center;
@include BoxShadow(10px, 20px);
.button{
width:300px;
height:300px;
&:hover{
opacity:0.9;
@include textCenter;
}
}
.wrapper{
@extend #test;
width:1000 * 2 px;
font-size:$fontL;
position:absolute;
left:50%;
margin-left:1000*2/2;
}
}