Category: sass / scss / Compass

[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 */

ログイン画面をスタイリング

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="asset/css/style.css">
    <script src=""></script>
  </head>
  <body>
  	<h1>ZEUS</h1>
    <div id="content">
  	<p>ログイン画面</p>
  	<form action="" method="post" id="form">
      <table>
        <tr>
          <th><label for="login">ログインID</label></th>
          <td><input type="text" name="login" size="40" placeholder="ログインIDを入力してください"><br>※半角英数字で入力してください</td>
        </tr>
        <tr>
          <th><label for="password">パスワード</label></th>
          <td><input type="text" name="password" size="40" placeholder="パスワードを入力してください"></td>
        </tr>
      </table>
  	<p class="sm">ログインID・パスワードをお忘れの方は<a href="">こちら</a><br>
  	   アカウントをお持ちでない方は<a href="">こちら</a></p><br>
       <div class="button_wrapper">
         <button type="submit" value="送信" id="square_btn">ログイン</button>
       </div>
    </form>
    </div>
  	<footer>
  		hpscript
  	</footer>
  </body>
</html>

body {
	margin:0px;
	#content{
		margin-right: 50px;
		margin-left: 50px;
		.sm{
			font-size: 11px;
		}
	}	
}
h1 {
	text-align: center;
}
p {
	font-size: 0.975px;
}
#form {
	font-size: 0.875px;
	table {
		
	}
	tr {

		height: 80px;
	}
	th {
	border: solid 1px #ccc;
		width:200px;
		text-align: left;
		background-color:#f5f5f5;
		padding: 5px 
	}
	td {
	border: solid 1px #ccc;
		width: 800px;
		padding-left: 10px;
	}
}
.button_wrapper{
	text-align:center;
}
input[type="text"]{
	border: 0;
	padding: 10px;
	font-size: 1.3em;
	color: #aaa;
	border: solid 1px #ccc;
	margin: 0 0 20px;
	width: 700px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	broder-radius: 3px;
}
#square_btn{
	position: relative;
	text-align: center;
	display: inline-block;
	padding: 0.55em 0.7em;
	text-decoration: none;
	color: #fff;
	background: #483d8b;
	border: solid 1px #483d8b;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
} 
footer {
	position: fixed;
	bottom:0px;
	width: 100%;
	height: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #483d8b;
	text-align: center;
	color: #fff;
}

なんだこの雑魚みたいなど素人クオリティーは。。。
すげー自信なくすわ。。ちくしょめえええええええええええええ

とりあえず、ログイン後ページを作るか。。ああ、なんか憂鬱だ。

loginページを作っていこう

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="asset/css/style.css">
    <script src=""></script>
  </head>
  <body>
  	<h1>ZEUS</h1>
    <div id="content">
  	<p>ログイン画面</p>
  	<form action="" method="post">
      <p>ログインID:<input type="text" name="login" size="40"></p>
      <p>パスワード:<input type="text" name="password" size="40"></p>
    </form>
  	<p>ログインID・パスワードをお忘れの方は<a href="">こちら</a><br>
  	   アカウントをお持ちでない方は<a href="">こちら</a></p>
    </div>
  	<footer>
  		hpscript
  	</footer>
  </body>
</html>

body {
	margin:0px;
	#content{
		margin-right: 50px;
		margin-left: 50px;
	}	
}
h1 {
	text-align: center;
}
footer {
	padding-top:5px;
	padding-bottom:5px;
	background: #483d8b;
	text-align: center;
	color: #fff;
}

なんじゃこりゃ、すげー時間かかるやんけ。日頃全くコーディングしていないのがばれる。

sassを使っていく

3.5.7が入っています。
[vagrant@localhost front]$ sass -v
Ruby Sass 3.5.7

gemをアップデートします。
$ gem update –system
RubyGems system software updated

$ gem update sass
新しいsassは3.6.0のようですね。

Successfully installed sass-3.6.0

sass

body {
	color: blue;
}

$ sass –watch style.scss:style.css
あれ、gulp必要ない？

login.php

<?php
?>
<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="asset/css/style.css">
    <script src=""></script>
  </head>
  <body>
  	<h1>ログイン画面</h1>
  	<p></p>
  </body>
</html>

sassまではok♪
では、コーディングしていきましょう。