
復習をかねたプログラミング学習の記録と+αで調べた事の備忘録です。

Day7~8で学んだこと「Sass」の書き方・使い方

【Day7】CSSの上位互換!Sassを学習しよう
Sassとは
CSSを楽に早く書くための言語。CSSが管理しやすくなる。
Sassには「Sass」と「Scss」という2種類の記述方法がある。
CSSと書き方が似ている「Scss」が主流。
代表的な機能
入れ子
・親要素の中に子要素、孫要素を書いていける
・入れ子にすることで、記載するコーディング量が減り、なおかつアイテムごとのまとまりとして把握しやすくなる
.items {
padding: 0;
margin: 0;
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
color: #333;
display: block;
padding: 12px;
}
}
}
&でつなげる擬似要素
・親要素の値を引き継ぐ
a {
color: #333;
text-decoration: none;
font-weight: 400;
&:hover {
opacity: 0.6;
}
&.active {
font-weight: 700;
}
}
変数
・カラーコードや、文字サイズ、フォントファミリーなどを一元管理できる
$layout-width-inner: 1024px;
// インナー幅を定義
$color-main: #3F51B5;
// メインとなるカラーの定義
$color-accent:#E81919;
// アクセントカラーの定義
$color-text: #333333;
//文字カラーの定義
四則演算
・幅をパーセンテージ(%)で出したり、line-height
の値を出すために使うことが多い。
(例)横幅が、980px。右側のメインカラムが680px、サイドカラムを200pxとする時に、これを%に直す
- メインカラム →
width: (680 / 980) * 100%
- サイドカラム →
width: (200 / 980) * 100%
@extend
・定義したスタイルを全て継承し、使いまわせる
.base-border{
border:1px solid #ddd;
}
.box1{
@extend .base-border;
width:100%;
}
.box2{
@extend .base-border;
width:50%;
}
@mixin
・定義したスタイルの一部変更ができる
@mixinで定義し、@includeで呼び出す
引数を使わない場合
@mixin baseBorder{
border:1px solid #ccc;
}
.box1{
@include baseBorder;
width: 100%;
}
.box2{
@include baseBorder;
width: 50%;
}
引数を使う場合
@mixin baseBorder($borderSize:1px, $borderType:solid, $borderColor:#ccc){
border:$borderSize $borderType $borderColor;
}
.box1{
@include baseBorder();
width: 100%;
}
.box2{
@include baseBorder($borderColor:#f90);
width: 50%;
}
mixinを使ったメディアクエリの設定方法
//マップ型変数breakpointsを定義
$breakpoints: (
//キー 値
'sp': 'screen and (max-width: 767px)',
'pc': 'screen and (min-width: 768px)'
) !default;
//メディアクエリ用のmixinを定義。
@mixin mq($breakpoint: sp) {
//map-get(マップ型変数, キー)で値を取得
@media #{map-get($breakpoints, $breakpoint)} {
//この中をカスタムできる
@content;
}
}
//使用例
.header {
height: 100px; //PC用の表示
@include mq(sp) {
height: 60px; //スマホの時だけ高さを60pxに!
}
}
/*このように @media screen and (width: 767px) { } を書かなくても、
PC用のcssを書きながらスマホ用の表示を書き足すことができる */
function
・自分で関数を定義する
引数を使わない場合
@function colorRed() {
// 関数colorRedを定義
@return #00f
}
.test {
color: colorRed();
}
CSSにコンパイルすると以下のようになる
.test {
color: #00f;
}
引数を使う場合
@function colorCode($value) {
@return $value
}
.test {
color: colorCode(green);
// 引数をgreenと記述
}
CSSにコンパイルすると以下のようになる。
引数に指定したプロパティがそのまま反映される。
.test {
color: green;
}
【Day8】デイトラ簡易版サイトのCSSをSassで書き直してみよう
・Live Sass Compilerの導入
Sassで書いた内容をCSSに変換する『コンパイル』という処理をするため
・ベンダープレフィックスとは
CSSの新しいプロパティに付けて、各ブラウザが対応できるようにする接頭辞。
ベンダープレフィックス | 対応ブラウザ |
-ms- | Internet Explorer |
-webkit- | Google Chrome / Safari |
-moz- | Firefox / Mozilla |
・Autoprefixerという拡張機能で自動入力できる。
・Sassファイルの分割
保守性が高まるのでファイルは分割する方が良い
- /sass/_button.scss
- /sass/_heading.scss
- /sass/style.scss
style.scssで読み込む際は、「@import」を使ってアンダーバー ”_”と「.scss」を除いたファイル名を指定
@import "button";
@import "heading";
※@importは廃止される予定
【デイトラ簡易版サイトの書き換えで使ったSass】
- 入れ子
- 変数→背景色や、ボーダーカラーを定義
- ”&”記号 &:hover
- @mixin→メディアクエリ
まとめ
Sassで一番感動したのメディアクエリ!!
とにかくレスポンシブ対応が楽になりました!
変数は使いこなすのが難しそうですが、まずは簡単な事だけでも使って行こうと思います!!
