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


この記事の筆者からWEBデザインを学ぶ

472

TRUNKではWEBデザインを無料で、あなたのレベルに合わせて学べます。

「なんで勉強するのに、大学の授業料ほどの大金を払わなきゃいけないのかナゾだわ」

て思っている方、TRUNKWEBデザインのスキルを身につけませんか?

無料のトレーニング詳細はこちら

この記事を書いた人

岡崎 友宏

TRUNKのCCOしながら、実家のMOLEという会社でデザイナーしています。 design,UX,wearable,frontend,HR,人材育成,採用,副業,焼き鳥,ウーロンハイ