
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デザインを学ぶ

TRUNKではWEBデザインを無料で、あなたのレベルに合わせて学べます。
「なんで勉強するのに、大学の授業料ほどの大金を払わなきゃいけないのかナゾだわ」
て思っている方、TRUNKでWEBデザインのスキルを身につけませんか?
無料のトレーニング詳細はこちら。