こんにちは！
ワタナベです。
今回は備忘録として、Sassの便利な記述を書いていきます。
①object-fit
自分はこれめっちゃ使うのでmixin作ると便利でした。
下記の例ではobject-fitの部分をcoverで固定してしまっていますが、変数にするとこのmixinだけでobject-fitに対応できます。
ただし、IE対応させるjsを使用している場合、font-familyの部分を変数にしてしまうと、変数のまま出力されてしまうので注意。（解決方法あったらこっそり教えてください…！）
【Sass(.scss)】
@mixin of($of_width:100%,$of_height:()){
width: $of_width;
height: $of_height;
object-fit: cover;
font-family: ‘object-fit: cover;’; //IE対応させるjs「ofi.min.js」を使用する場合記述
}img{
@include of($of_width:100px,$of_height:100px);
}
【CSS(.css)】
img{
width:100px;
height:100px;
object-fit: cover;
font-family: ‘object-fit: cover;’;
}
②Flexbox 均等配置左寄せ（3列）
こちらも使用頻度高めなのでmixinにしました。
widthだけ変えられるようにしてあります。
4列もmixinにすると無敵です（今回は割愛します）
【Sass(.scss)】
@mixin flex_row3($row3_width:32%){
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&::after{
content: “”;
display: block;
width: $row3_width;
}
}ul{
@include flex_row3($row3_width:30%)
}
li{
width: 30%;
}
【CSS(.css)】
ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul::after{
content: “”;
display: block;
width: 30%;
}
li{
width: 30%;
}
③疑似要素でFontAwesomeを表示
疑似要素内でincludeします。
変数の値は「”\f100″」のように、クォーテーションマークで囲んで記述します。
（verは4を想定しています。）
【Sass(.scss)】
@mixin font_awsm($icon:()){
content:$icon;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}p{
&::before{
@include font_awsm($icon:(“\f100”))
}
}
【CSS(.css)】
p::before{
content:”\f100″;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
④for文でループ処理（繰り返し）
【Sass(.scss)】
こちらは最近勉強中の記述。
数字で管理してる要素にループ処理したいときに便利です。
@for $margin from 1 through 3{
.format#{$margin}{
margin: 60px auto;
}
}
【CSS(.css)】
.format1{ margin: 60px auto; }
.format2{ margin: 60px auto; }
.format3{ margin: 60px auto; }
使いこなせればとても便利だと思うのだけれど、まだうまく使えていない。精進…！
⑤地味に便利な小技
変数にカラーコードを入れておくと、何かと便利です。
特に便利で使用頻度が高いのが透明度の指定。
カラーコードのままで透明度の指定ができてしまいます。
いちいち調べなくていいので超助かります。
【Sass(.scss)】
$color: #FFCC5A;
div {
background: rgba($color, 0.5);
}
【CSS(.css)】
div{
background: rgba(255,205,92,0.5);
}
もっと便利な記述を知ってできる限り楽にコーディングしたいですね…！(‘ω’)
それではまた次回。
ご閲覧ありがとうございました！
