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

145

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;
}
}


次はgulpを学びましょう


gulpは、Sassコンパイルなど様々なタスクを設定して動かすことができるビルドツールです。
gulpのトレーニングも実施するので興味がある人は是非参加してみてください!
html/cssがわかる人向け | gulpのススメ タスクランナーを使って効率的にコーディング
164

この記事を書いた人

岡崎 友宏

某企業のデザイナーをしながら、TrunkのCCOしています。TRUNKではデザインや開発を担当しています。 design,UX,wearable,frontend,HR,人材育成,採用,副業,焼き鳥,ウーロンハイ