#4 Sassを使ってCSSを効率的に記述する
Sass はCSSを便利に書く方法です。
Sassを使うとCSSを記述する際に変数や関数が使えるようになり、シンプルで効率的に記述することが可能になります。
Sassには「Sass(.sass)」や「Scss(.scss)」「Less(.less)」といった記法がありますが、
ここではまた、Scss記法で記述したとしても最終的にCSSファイルとして書き出したいために コンパイル(変換)という作業が必要となります。 コンパイルする方法はテキストエディタなどで簡単にできます。
また、scssファイルはcssフォルダと別に、scssフォルダを作りそのなかで管理しましょう。
階層イメージ
├── css
│ ├── reset.css
│ └── style.css
├── images
├── index.html
└── scss
└── style.scss
例)scssでの記述の仕方
.main{
width:90vw;
&__text{
text-align:center;
&--sub{
font-size:0.8em;
}
}
&__image{
margin:0 auto;
}
}
↓
cssフォルダにcssファイルとしてコンパイル(変換)されるとこのようになります
.main{
width:90vw; }
.main__text{
text-align:center; }
.main__text--sub{
font-size:0.8em; }
.main__image{
margin:0 auto; }
Visual Studio CodeでSCSSをコンパイル(変換)する設定
Visual Studio Code(インストールとセッティングの手順
○ VS codeを起動して、左のアイコンの「機能拡張」をクリックし、検索窓に「
出てきたらインストールボタンをクリック。

「拡張機能の設定」をクリックすると設定ウィンドウが開きます。

formats部分を以下のように変更します。
{
"liveSassCompile.settings.formats": [
{
"format": "nested",
"extensionName": ".css", /* 拡張子cssファイルをコンパイルする */
"savePath": "~/../css" /* scssフォルダと同階層にある、cssフォルダに入れる場合 */
}
],
}
"format": は出力されたときの書かれ方(フォーマット)を指定できます。
.classname{
color:#F00;
font-size:2em;
span{
padding:3px;
}
}
↓
/* expandedに設定したときの出力 */
.classname {
color: #F00;
font-size: 2em;
}
.classname span {
padding: 3px;
}
/* nestedに設定したときの出力 */
.classname {
color: #F00;
font-size: 2em; }
.classname span {
padding: 3px; }
/* compactに設定したときの出力 */
.classname { color: #F00; font-size: 2em; }
.classname span { padding: 3px; }
/* compressedに設定したときの出力 */
.classname{color:#F00;font-size:2em}.classname span{padding:3px}
expanded: 普通の形式のcss、改行が入るnested: 改行を詰めたcss
compact: セレクタごとの波括弧が1行になる。改行が入る
compressed: どこにも改行がない形式、で出力されます。
Live Sass Compile › Settings: Generate Map にあるsettings.jsonを編集をクリック
{
"liveSassCompile.settings.generateMap": false
}
.mapファイルを作らないように設定します。同じファイルに記述する場合は以下のように記述
{
"liveSassCompile.settings.formats": [
{
"format": "nested",
"extensionName": ".css",
"savePath": "~/../css"
}
],
"liveSassCompile.settings.generateMap": false,
その他設定A...,
その他設定B...,
}
7. 画面下に表示される「Watch Sass」をクリックすると、scssファイルを保存すると同時にコンパイルし、cssファイルが生成されます。

#5 SCSSの使い方
SCSSでは、変数と関数を使えるようになり非常に便利です。変数を使う
変数に色や数値の情報を入れておき、 各プロパティの値の部分に変数名で指定することで使えるようになります。変数に代入している値を変えるだけで、変数を使っているすべての箇所が変わるので便利です。
$colorA:#f3bebe; /* 文字列の頭に$をつけて変数の扱いになる */
$sizeB:12px;
.bg{
background-color:$colorA;
}
.area{
font-size:$sizeB;
background-color:$colorA;
}
.navi{
font-size:$sizeB;
}
↓
.bg {
background-color: #f3bebe; }
.area {
font-size:12px;
background-color: #f3bebe; }
.navi {
font-size:12px; }
関数を使う
関数は自分で作る独自関数と、あらかじめ作られているネイティブな(ビルトインされた)関数の2種類があります。 Sassのネイティブ関数
@function 関数名($引数) {
@return 戻り値;
}
@return 戻り値;
}
/*独自関数を作る*/
@function Round-pixel($i) {
@return round($i)+px; /*ネイティブのround関数 = 小数点の四捨五入*/
}
/*使い方*/
.selector{
width: Round-pixel(123.656);
}
↓出力結果
.selector {
width: 124px; }
変数とメディアクエリの初期設定
SCSSでメディアクエリを使うときに便利になる書き方の初期設定です。今度コーディングするときにこちらを使ってみましょう。コピーして使ってみてください。
ブレイクポイントは、$breakpoints変数に入れていますが、必要に応じて増やしたり、いらないものは削除して構いません。 ただ$bp1と$bp2用に最低でも2つのブレイクポイントは登録しておきましょう。keyの名称に特にルールはないので何にしても構いません。
/* マップ $map:(key: value) 各幅の値を登録しておく */
$breakpoints: (
'sm': 340,
'md': 768,
'lg': 1024,
'xl': 1230,
'xxl': 2000,
) !default; /*変数定義前に自動で値を代入させるため*/
/* @mixin = 引数によってスタイルの設定を細かく指示 */
@mixin mq($mq, $bp1:lg, $bp2:lg){
$w1 : map-get($breakpoints, $bp1);
$w2 : map-get($breakpoints, $bp2); /* $breakpoints = マップ、から値を取得(map関数) */
$min1 : 'min-width: #{($w1+1)}px'; /* xxx-width: と1px調整 */
$max1 : 'max-width: #{($w1)}px';
$min2 : 'min-width: #{($w1+1)}px';
$max2 : 'max-width: #{($w2)}px';
@if $mq == min {
@media screen and ($min1) {
@content; /* @includeしたとき「プロパティ:値」をココに挿入させる */
}
}
@else if $mq == max {
@media screen and ($max1) {
@content;
}
}
@else if $mq == min-max {
@media screen and ($min2) and ($max2) {
@content;
}
}
}
以下のように使います
#contents_wrap{
margin: 0 auto;
padding:5px;
@include mq('max','md'){ /*769pxまで*/
width:800px;
padding:8px;
position:relative;
border: 1px solid #F00;
}
@include mq('min-max','md','xl'){ /*770px以上、1230pxまで*/
width:95vw;
border: 1px solid #00F;
}
@include mq('min','xl'){ /*1231px以上*/
width:1200px;
padding:10px;
position:relative;
border: 1px solid #FF0;
}
}
↓出力結果
#contents_wrap {
margin: 0 auto;
padding: 5px; }
@media screen and (max-width: 768px) {
#contents_wrap {
width: 800px;
padding: 8px;
position: relative;
border: 1px solid #F00; } }
@media screen and (min-width: 769px) and (max-width: 1230px) {
#contents_wrap {
width: 95vw;
border: 1px solid #00F; } }
@media screen and (min-width: 1231px) {
#contents_wrap {
width: 1200px;
padding: 10px;
position: relative;
border: 1px solid #FF0; } }
以前作ったレスポンシブサイトをscss化してみよう。
基礎1 #7 レスポンシブコーディングでサイト制作① で作成したレスポンシブデザインのcssをscss化してみましょう。ここでは早速ブレイクポイントや色を変数で指定してみます。 ただ、この変数を記述したファイルは別のファイルで管理したいため _variables.scss (
ファイル構成は以下のとおりです。
├── css
│ ├── reset.css
│ └── style.css
├── images
├── index.html
└── scss
├── _variables.scss
└── style.scss
_variables.scss
style.scss
/* _variables.scss */
$breakpoints: (
'sm': 340,
'md': 768,
'lg': 1215,
) !default;
@mixin mq($mq, $bp1:lg, $bp2:lg){
$w1 : map-get($breakpoints, $bp1);
$w2 : map-get($breakpoints, $bp2);
$min1 : 'min-width: #{($w1+1)}px';
$max1 : 'max-width: #{($w1)}px';
$min2 : 'min-width: #{($w1+1)}px';
$max2 : 'max-width: #{($w2)}px';
@if $mq == min {
@media screen and ($min1) {
@content;
}
}
@else if $mq == max {
@media screen and ($max1) {
@content;
}
}
@else if $mq == min-max {
@media screen and ($min2) and ($max2) {
@content;
}
}
}
$mainColor:#7BC2BA;
style.scss
/* style.scss */
@charset "utf-8";
@import '_variables.scss';
body {
font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
color: $mainColor;
}
a {
text-decoration: none;
}
.btn a,
input[type="submit"]{
display:inline-block;
margin:0 auto;
padding:10px 0;
width:130px;
cursor:pointer;
font-size:1.3em;
color:#58847F;
text-align:center;
border: 10px solid #58847F;
background-color:transparent;
}
/* ===========================
header
=========================== */
header {
border-top:20px solid $mainColor;
/* widthをpx指定している部分がレスポンシブ化のポイントになります */
.header__contents{
width:1200px;
margin:43px auto 88px;
display:flex;
justify-content:center;
@include mq('max','md'){
display:block;
margin-top:240px;
position:relative;
}
@include mq('max','lg'){
width:100%;
}
&--text{
align-self:flex-end;
margin:0 30px;
width:25%;
border-top:1px solid $mainColor;
border-bottom:1px solid $mainColor;
@include mq('max','md'){
margin:0 auto;
width:90%;
}
}
.text-right{
text-align:right;
@include mq('max','md'){
text-align:left;
border-bottom:none;
}
}
&--logo{
text-align:center;
@include mq('max','md'){
position: absolute;
top:-228px;
left: 0;
right: 0;
margin: auto;
}
&-mark{
margin-bottom:20px;
}
}
}
.header__image{
position:relative;
height:600px;
background:$mainColor url('../images/bg_header.jpg')no-repeat right center / cover;
@include mq('max','md'){
position:relative;
height:40vh;
background:$mainColor url('../images/bg_header.jpg')no-repeat right center / cover;
}
img{
position:absolute;
top:-60px;
right:5vw;
}
}
}
/* ===========================
nav
=========================== */
nav {
background-color:$mainColor;
ul{
width:1200px;
margin:0 auto;
display:flex;
justify-content: space-around;
@include mq('max','md'){
flex-wrap:wrap;
}
@include mq('max','lg'){
width:100%;
}
li{
width:120px;
height:60px;
@include mq('max','md'){
margin:6px 0;
}
a{
display:flex;
justify-content: center;
align-items: center;
height:100%;
color:#fff;
@include mq('max','md'){
border:1px solid #fff;
}
}
}
}
}
/* ===========================
footer
=========================== */
footer {
text-align:center;
.footer {
color:#fff;
padding:60px 0 70px;
background-color:$mainColor;
h2{
font-size:50px;
margin:30px auto 80px;
@include mq('max','md'){
font-size:2em;
}
}
&__image{
width:100%;
height:600px;
background:$mainColor url('../images/bg_footer.jpg')no-repeat center center / cover;
@include mq('max','md'){
height:40vh;
}
}
&__column{
width:1200px;
display:flex;
margin:40px auto 100px;
@include mq('max','md'){
display:block;
}
@include mq('max','lg'){
width:100%;
}
&--form{
flex:1;
width:60%;
@include mq('max','md'){
flex:1;
width:100%;
}
form{
width:60%;
margin:10px auto 0;
display:flex;
flex-direction:column;
text-align:left;
@include mq('max','md'){
width:80%;
}
p{
font-size:0.9em;
margin-bottom:15px;
}
input[type="text"]{
margin: 0 0 20px 0;
padding:5px 10px;
font-size:1.2em;
border-radius:5px;
border:none;
}
textarea{
margin: 0 0 20px 0;
padding:10px;
height:8em;
font-size:1.3em;
border-radius:5px;
border:none;
}
}
}
&--map {
flex:1;
text-align:left;
width:500px;
height:450px;
@include mq('max','lg'){
margin:0 auto;
width:97%;
}
iframe{
width:500px;
height:450px;
@include mq('max','md'){
width:90%;
margin:50px auto 0;
text-align:center;
}
@include mq('max','lg'){
width:40vw;
height:450px;
}
}
}
}
&__copy{
font-size:0.8em;
padding:20px 0;
color:#aaa;
}
}
}
/* ===========================
コンテンツ
=========================== */
main {
.menu {
width:1200px;
margin:0 auto;
@include mq('max','md'){
margin:30px auto 0;
}
@include mq('max','lg'){
width:100%;
}
&__content{
display:flex;
text-align:center;
@include mq('max','md'){
display:block;
position:relative;
}
&--text{
flex:1;
@include mq('max','md'){
position: absolute;
top:30px;
left: 0;
right: 0;
margin: auto;
z-index:99;
}
img{
margin-top:80px;
text-align:center;
}
h1{
margin:20px 0 50px;
font-size:1.3em;
}
p{
width:65%;
margin:0 auto 20px;
}
}
&--image{
flex:1;
height:600px;
@include mq('max','md'){
position: relative;
margin-bottom:2px;
&::before{
height:600px;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
}
}
.img-cording{
background:url('../images/menu_cording.jpg')no-repeat center center / cover;
}
.img-design{
background:url('../images/menu_design.jpg')no-repeat center center / cover;
}
}
}
.vision {
position: relative;
@include mq('max','md'){
margin-top:50px;
}
&__image{
border-top: 60px solid $mainColor;
height:600px;
background:$mainColor url('../images/bg_contents.jpg')no-repeat center center / cover;
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
@include mq('max','md'){
font:bold 1.6em/1.9em sans-serif;
}
/*背景画像に黒いカバーをかける方法*/
&::before{
height:600px;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 60px;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
h1{
font:bold 31px/2.3em sans-serif;
text-align:center;
color:#fff;
z-index:99;
}
p{
margin-top:75px;
z-index:99;
}
}
&__columun{
width:1200px;
margin:80px auto 150px;
display:flex;
justify-content: space-between;
@include mq('max','md'){
width:90%;
margin:10px auto;
display:block;
}
@include mq('max','lg'){
width:97%;
}
&--item{
width:30%;
text-align:left;
@include mq('max','md'){
width:90%;
margin-top:40px;
text-align:left;
}
&-img{
margin:0 0 50px;
text-align:center;
@include mq('max','md'){
margin:0 0 10px;
text-align:center;
}
img{
height:200px;
}
}
}
}
}
}