コーディング

【備忘録】Sassの便利な記述

  • このエントリーをはてなブックマークに追加
【備忘録】Sassの便利な記述

こんにちは!

ワタナベです。

今回は備忘録として、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);
}

 

 

もっと便利な記述を知ってできる限り楽にコーディングしたいですね…!(‘ω’)

それではまた次回。

ご閲覧ありがとうございました!

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ