記事ディレクトリ
1、sass構文
1.1 CSSコンパイルモード
- css-normal
- sass / scss —効率的// *********
- 少ない—効率的
1.2 sassの概要
- 出典：ruby language
- 基本バージョン、接尾辞はsassです：{}がないと、インデントが不十分で読みにくく、メンテナンスが困難な場合にのみ実現できます
// css
.box {width: 100px}
// .sass
.box width: 100px; // 据说是这样
- .scssサフィックス-高い可読性と簡単なメンテナンス
html { background: red }
// scss语法--嵌套 --- 权重
.box {
color: blue;
.test {
font-size: 20px;
}
}
// ==》
.box {color: blue;}
.box .test { font-size: 20px;}
1.3 scssの使い方
使用する最後の必要性はcssファイル、書き込まれたscssファイルです
変換ツールgulp / webpack / rubyツール/エディタープラグイン
gulpを使用してscssファイルを処理する
2. sassの使用法
2.1 sassモジュールをインストールする
cnpm i gulp-sass -S（推奨）
cnpm i gulp-sass-china -S
2.2 scssファイルgulpを処理するタスクを構成する
gulp.task('scss2css', () => {
gulp.src('scss/**/*')
.pipe(concat('main.scss')) // 合并scss文件
.pipe(sass()) // 转为css文件
.pipe(gulp.dest('dist/css'))
.pipe(minifyCss()) // 压缩
.pipe(rename('main.min.css'))
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload())
})
// 在watch中监听
gulp.watch('scss/**/*', ['scss2css'])
// 在build中构建
gulp.task('build', ['copy-html', 'copy-css', 'copy-js', 'copy-data', 'copy-assets', 'scss2css'], () => {
console.log('success')
})
3. scss構文を学ぶ
3.1 scssのコメント文を学ぶ
- 単一行コメント推奨
//を使用して単一行コメントを完成させます— jsに似て
おり、cssにコンパイルされません
- 複数行コメント
/ * * /を使用して、複数行コメントを完成させます— jsと同様に、
最初にそれをcssファイルにコンパイルしてから、cssファイルをコメント化します
3.2変数
scssはcssに動的言語の特性（変数、関数、条件判断、ループ...）を提供します
scssは非常に敏感です;書くことを忘れないでください。
3.2.1単一値変数
// scss
$baseColor: red;
.box {
background-color: $baseColor;
}
// ==> css
.box {
background-color: red; }
3.2.2 scssは4つの算術演算を行います
// scss
$baseColor: red;
html {
color: $baseColor;
border: 1px solid $baseColor - 80;
background-color: $baseColor / 2;
background: $baseColor + 200;
}
// ==> css
html {
color: red;
border: 1px solid #af0000;
background-color: maroon;
background: #ffc8c8; }
3.2.3多値変数
多値変数はnth（変数名、インデックス値）を使用します。インデックス値の開始値は1です— cssのnth-childに似ています
複数の単一値変数を記述する方がよい—いいえ—ボタンボタンのセットをスタイルする必要があると仮定します
// scss
$baseColor: red blue;
html {
background: nth($baseColor, 1);
color: nth($baseColor, 2);
}
// ==> css
html {
background: red;
color: blue; }
3.2.4複雑な変数-ループ
// scss
$list: (top 30px) (right 30px) (bottom 10px) (left 40px);
@each $name, $value in $list{
.box-#{$name} {
width: $value;
}
}
// ==>
.box-top {
width: 30px; }
.box-right {
width: 30px; }
.box-bottom {
width: 10px; }
.box-left {
width: 40px; }
// scss
$headers: (h1: 32px, h2: 20px, h3: 14px);
@each $key, $value in $headers {
#{$key} {
font-size: $value;
}
}
// ==> css
h1 {
font-size: 32px; }
h2 {
font-size: 20px; }
h3 {
font-size: 14px; }
3.3 scssのネスト
// scss
html {
font-size: 12px;
body {
background: #f66;
header {
width: 100%;
height: 40px;
nav {
background-color: #00f;
}
}
section {
width: 100%;
min-height: 500px;
}
footer {
width: 100%;
height: 60px;
}
}
}
// ==> css
html {
font-size: 12px; }
html body {
background: #f66; }
html body header {
width: 100%;
height: 40px; }
html body header nav {
background-color: #00f; }
html body section {
width: 100%;
min-height: 500px; }
html body footer {
width: 100%;
height: 60px; }
3.4ミックスイン
- パラメータなし
// scss
@mixin marginCenter {
margin: 0 auto;
}
.container {
width: 1000px;
min-height: 600px;
// margin: 0 auto;
@include marginCenter();
}
// ==> css
.container {
width: 1000px;
min-height: 600px;
margin: 0 auto; }
- パラメータあり
// scss
@mixin margin($top, $right, $bottom, $left) {
margin: $top $right $bottom $left;
}
.container {
@include margin(10px, 10px, 20px, 20px);
}
// ==> css
.container {
margin: 10px 10px 20px 20px; }
- 互換性の問題を解決する
//scss
@mixin flexbox {
display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.nav {
ul {
@include flexbox();
li{
color: #333;
}
}
}
footer {
ul {
@include flexbox();
li{
font-size: 14px;
}
}
}
// ==> css
.nav ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
.nav ul li {
color: #333; }
footer ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
footer ul li {
font-size: 14px; }
- デフォルトのパラメータを混ぜる
// scss
@mixin opacity($val: 1) {
opacity: $val;
}
.box {
@include opacity();
}
.box1 {
@include opacity(0.5);
}
// ==> css
.box {
opacity: 1; }
.box1 {
opacity: 0.5; }
3.5拡張/継承
// scss
.active {
background-color: #f66;
color: #fff;
}
.success {
// background-color: #f66;
// color: #fff;
@extend .active;
font-size: 30px;
}
// ==> css
.active, .success {
background-color: #f66;
color: #fff; }
.success {
font-size: 30px; }
3.6関数
// scss
@function dark($color, $val) {
@return $color - $val;
}
@function light($color, $val) {
@return $color + $val;
}
.text {
color: dark(red, 200);
}
.text1 {
color: light(red, 200);
}
// ==>
.text {
color: #370000; }
.text1 {
color: #ffc8c8; }
3.7条件付き判断
// scss
// @mixin flex($val: 1) {
// box-flex:$val;
// -webkit-box-flex:$val;
// -moz-box-flex:$val;
// flex:$val;
// -webkit-flex:$val;
// }
@mixin flex($val) {
@if $val == auto {
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
flex:1;
-webkit-flex:1;
} @else {
box-flex:$val;
-webkit-box-flex:$val;
-moz-box-flex:$val;
flex:$val;
-webkit-flex:$val;
}
}
.test {
@include flex(auto);
}
li {
@include flex(3);
}
// ==> css
.test {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
flex: 1;
-webkit-flex: 1; }
li {
box-flex: 3;
-webkit-box-flex: 3;
-moz-box-flex: 3;
flex: 3;
-webkit-flex: 3; }
3.8別のscssファイルをインポートする
// val.scss 变量
$baseColor: red;
$baseFontSize: 12px;
// base.scss 混入
@mixin flex {
flex: 1
}
// test.scss 应用
@import 'val.scss';
@import 'base.scss';
.box {
@include flex();
font-size: $baseFontSize;
}
// ==》 css
.box {
flex: 1;
font-size: 12px; }