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♪
では、コーディングしていきましょう。

python, pug, sassで温度、降水量、風量・風向き

python3

import urllib.request
from datetime import datetime

time = datetime.strftime(datetime.now(), "%Y%m%d%H")

url1 = "https://www.jma.go.jp/jp/amedas/imgs/temp/000/"+ time +"00-00.png"
savename = "image/temp.png"
urllib.request.urlretrieve(url1, savename)

url2 = "https://www.jma.go.jp/jp/amedas/imgs/rain/000/"+ time +"00-00.png"
savename = "image/rain.png"
urllib.request.urlretrieve(url2, savename)

url3 = "https://www.jma.go.jp/jp/amedas/imgs/wind/000/"+ time +"00-00.png"
savename = "image/wind.png"
urllib.request.urlretrieve(url3, savename)

print("保存しました")

pug

doctype html
html(lang="ja")
	head
		meta(charset="utf-8")
		link(rel='stylesheet', href="css/style.css")
		title アメダス
	body
		h1 アメダス全国
		hr
		section#top
			h2 降水量
			img.image(
				src="/image/rain.png"
			)
		section#top
			h2 気温
			img.image(
				src="/image/temp.png"
			)
		section#top
			h2 風向・風速
			img.image(
				src="/image/wind.png"
			)

sass

body
	margin: 5px
h1, h2
	margin-top: 0px
	margin-bottom: 0px
#top
	width: 320px
	float: left
.image
	width: 300px
	height: 225px

– jsで日時を表示したい
– illustratorでアイコンを作りたい
– crontabを設定したい
– awsに載せたい
– RSSのニュースを取得して表示したい

あれ、pugは変数もたせて、foreachとかできるんだっけ?できれば、繰り返し処理にしたいところ。