Category: sass / scss / Compass

SassにおけるMedia Query

一般的なmedia query

@media screen and (max-width: 600px) {
  h1 {
    color: red;
  }
}

_breakpoint.scss

$breakpoints: (
    "sm": "screen and (min-width: 400px)",
    "md": "screen and (min-width: 768px)",
    "lg": "screen and (min-width: 1000px)",
    "xl": "screen and (min-width: 1200px)",
) !default;

_mixin.scss

@mixin mq($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}

style.scss

@import "_breakpoint";
@import "_mixin";

.test {
    color: blue;

    @include mq(sm) {
        color: yellow;
    }

    @include mq(lg) {
        color: red;
    }
}

↓
style.css

.test {
  color: blue;
}
@media screen and (min-width: 400px) {
  .test {
    color: yellow;
  }
}
@media screen and (min-width: 1000px) {
  .test {
    color: red;
  }
}

うわ、これは凄い!!!!

Sassの入れ子/ import

└── scss/
├── _variables.scss ※色、フォントサイズなどの変数を定義するファイル
├── _mixins.scss ※ミックインを定義するファイル
├── _buttons.scss ※ボタンに関するスタイルを定義するファイル
├── _layout.scss ※ページのレイアウトやグリッドレイアウトに関するスタイルを定義するファイル
└── main.scss

モジュールのインポート
_colors.scss

$base-color:#3498db;

_buttons.scss

$base-color:#e74c3c

style.scss

@use 'buttons';
@use 'colors';

.btn {
    background-color:buttons.$base-color;
    color:colors.$base-color;
}

↓
style.css

.btn {
  background-color: #e74c3c;
  color: #3498db;
}

おおおお、素晴らしい！これは使いたい^^

ちなみに、mixinとは、よく利用するCSSスタイルを定義して、他の場所でも使いまわせるようにする機能のこと。
引数を使って、関数のように利用することができる。

Sass基本

### Sassの特徴
– ネスト構造を利用できる
– スタイルシートを分けられる
– 条件分岐を利用できる
– mixin機能の利用

### 変数

$black: #000000;
$position: left;

.item1 {
    color: $black;
}

.item2 {
    background: $black;
    margin-#{$position}: 30px;
}

↓

$black: #000000;
$position: left;

.item1 {
    color: $black;
}

.item2 {
    background: $black;
    margin-#{$position}: 30px;
}

### ネスト

.item1 {
    width: 200px;

    .item2 {
        width: 100px;

        .item3 {
            width: 50px;
        }
    }
}

↓

.item1 {
    width: 200px;

    .item2 {
        width: 100px;

        .item3 {
            width: 50px;
        }
    }
}

### 条件分岐

$position: left;
$width: 250px;

.item1 {
    @if $position == left {
        padding-left: 10px;
    }
}

.item2 {
    @if $width > 300px {
        margin-right: 10px;
    } @else if $width < 200px {
        margin-left: 10px;
    } @else {
        margin-top: 10px;
    }
}

↓

.item1 {
  padding-left: 10px;
}

.item2 {
  margin-top: 10px;
}

break pointの時に利用したいですね。

[Sass] media queryを変数で書いて重複をなくしたい

HTML: チャット画面をBluma CSSでinputとsubmitを書いているが、classのis-expandが横幅maxにならないので、CSSで横幅を指定する。その際に、レスポンシブルでスマホはwidth85%, desktopはwidth65%としたい。

			<div class="field is-grouped" id="newMessage">
			  <p class="control is-expanded" >
				<input type="text" id="message" class="input">
			  </p>
			  <p class="control">
			    <input type="submit" value="send" class="button is-link">
			  </p>
			</div>

画面

### 従来のmedia queryで書く場合
style.scss: これでも動くには動くが、プログラマーとしては重複して書くのはかなり気持ちが悪い

@media screen and (min-width: 768px) {
	#newMessage {
		position: fixed;
		width:65%;
		bottom: 30px;	
	}
}
@media screen and (max-width: 768px) {
    #newMessage {
		position: fixed;
		width:85%;
		bottom: 30px;	
	}
}

### Sassで変数を使って書く場合
media queryで表示を分けて書く箇所が多い場合はかなり重宝できる

$breakpoints: (
	'sm': 'screen and (max-width: 768px)',
	'md': 'screen and (min-width: 768px)',
) !default;

@mixin mq($breakpoint: md) {
	@media #{map-get($breakpoints, $breakpoint)}{
		@content;
	}
}
#newMessage {
	position: fixed;
	@include mq(sm) { 
    	width: 85%
  	}
  	@include mq(md) { 
    	width: 65%
  	}
	bottom: 30px;	
}

webpackでコンパイルされると、以下のように出力されている

あら、　かなり良いですね~
寿司食べたい🍣

webpack環境設定: Sass

– style.scssをmain.jsにバンドルさせる
– webpack, webpack-cli, webpack-dev-server, style-loader, css-loaderインストール済

### Sassモジュールインストール
$ npm i -D sass sass-loader

### webpack.config.js
– scssファイル -> sass-loader -> css-loader -> style-loader

const MODE = "development";
const enabledSourceMap = MODE === "development";

module.exports = {

	entry: `./src/index.js`,

	output: {
		filename: "main.js"
	},

	devServer: {
		host: '192.168.33.10',
		port: '8000',
		contentBase: "dist",
		open: true
	},

	module: {
		rules: [
			{
				test: /\.scss/,
				use: [
					"style-loader",
					{
						loader: "css-loader",
						options: { 
							url: false,
							sourceMap: enabledSourceMap,

							// 0 => no loaders(default);
							// 1 => postcss-loader;
							// 2 => postcss-loader, sass-loader;
							importLoaders: 2
						}
					},
					{
						loader: "sass-loader",
						options: {
							sourceMap: enabledSourceMap
						}
					}
				]
			}
		]
	}
};

/src/style.scss

/src/index.js

import "./style.scss";

$ npm run build

gulp + sassの環境を整えよう

## sassをインストール
$ npm i -D gulp-sass

imgを圧縮し、sassとhtmlを編集したら、自動反映にします。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var webserver = require('gulp-webserver');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');

gulp.task('html', function(done){
	gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/*.html', gulp.task('html'))
	gulp.watch('./src/sass/*.scss', gulp.task('sass'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dest')
		.pipe(webserver({
			host:'192.168.34.10',
			port: 8000,
			livereload: true,
		}));
	done();
});

gulp.task('default', gulp.series('html','img','sass','watch','webserver'));

あ、これでいいじゃん。あとは、JSとCSSのLint周りか

Sass 4

$totalWidth: 940px;
$columnCount: 5;
@function getColumnWidth($width, $count){
	$padding: 10px;
	$columnWidth: floor($width - ($padding * ($count - 1) / $count));
	@debug $columnWidth;
	@return $columnWidth;
}

.grid {
	float: left;
	width: getColumnWidth($totalWidth, $columnCount);
}

@mixin round {
	border-radius: 4px;
}

.label {
	font-size: 12px;
	@include round;
}

.msg {
	font-size: 12px;
	font-weight: bold;
	padding: 2px 4px;
	color: white;
}

.errorMsg {
	@extend .msg;
	background: red;
}

.warningMsg {
	@extend .msg;
	background: orange;
}

.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}

.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}

OK! 比較的いいペース

Sass 3

lighten, darkenなどが使える

$brandColor: red;

#main {
	width: 90%;
	p {
		color: lighten($brandColor, 30%);
		font-size: 16px;
	}
}

#main {
  width: 90%;
}
#main p {
  color: #ff9999;
  font-size: 16px;
}

sass module
https://sass-lang.com/documentation/modules

if文

$debugMode: true;

#main {
	@if $debugMode == true {
		color: red;
	} else {
		color: green;
	}
}

for

@for $i from 10 through 14 {
.fs#{$i} {font-size: #{$i}px;}
}
$i: 10;
@while $i <= 14 { .fs#{$i} {font-size: #{$i}px;} $i: $i +1; } [/css] [css] $animals: cat, dog, tiger; @each $animal in $animals { .#{$animal}-icon { background: url("#{$animal}.png"); } } [/css]

Sass 2

sassの自動変換
変更があると、上書きされる
[vagrant@localhost sass]$ sass –style expanded –watch scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
write css/main.css
write css/main.css.map
>>> Change detected to: scss/main.scss
write css/main.css
write css/main.css.map

あれ、gulpって必要なかったっけ？

/* comment */

#main {
	width: 90%;
	p {
		font-size: 16px;
		a {
			text-decoration: none;
		}
	}
}

&の使い方

a {
			text-decoration: none;
			&:hover {
				font-weight: bold;
			}
		}

変数

$baseFontSize: 14px;

#main {
	width: 90%;
	p {
		font-size: $baseFontSize;
	}
}

$imgDir: "../img/";

#main {
	width: 90%;
	background: url($imgDir + "bg.png");
	p {
		font-size: 16px;
	}
}

Sass 1

Sassとは？
Syntactically Awesome StyleSheet
CSS拡張メタ言語
書き方はSASS記法とSCSS記法がある
SASS記法は拡張子が.sass, ruby like,Haml
SCSSは.scss

$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-linux]
$ sudo yum install rubygems
$ gem -v
2.5.1
$ gem update –system 2.7.10
$ gem install sass
$ sass -v
Ruby Sass 3.7.4

ファイル構成
– css
— styles.css
– index.html
– scss

#main {
	width: 90%;
	p {
		font-size: 14px;
	}
}

[vagrant@localhost sass]$ sass –style expanded scss/main.scss:css/styles.css
[vagrant@localhost sass]$ cat css/styles.css
#main {
width: 90%;
}
#main p {
font-size: 14px;
}

/*# sourceMappingURL=styles.css.map */