-
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。查看全部
-
Sass learning website http://www.w3cplus.com/sassguide/ https://www.codecademy.com/learn/learn-sass查看全部
-
//SCSS /* 字符运算: 在 Sass 中可以通过加法符号“+”来对字符串进行连接。 除了在变量中做字符连接运算之外， 还可以直接通过 +，把字符连接在一起： */ $content: "Hello" + " " + "Sass!"; .box:before { content: " #{$content} "; } div { cursor: e + -resize; } /* 注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 */ p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }查看全部
-
//SCSS /* 颜色运算: 所有算数运算都支持颜色值，并且是分段运算的。 也就是说，红、绿和蓝各颜色分段单独进行运算。 */ p { color: #010203 + #040506; } /* 同样算数运算也能将数字和颜色值一起进行分段运算. */ p { color: #010203 * 2; } /* 颜色运算,如果超值问题？最大值 ： 最小值 rgab(),alpha 不参与运算！ */ p { color: #F00F01* 3; border-color: #000001* 3; background: rgba(255,1,0,0.3)*3; } $base-color: #010101; span{ color: $base-color* 255; }查看全部
-
//SCSS /* 颜色运算: 所有算数运算都支持颜色值，并且是分段运算的。 也就是说，红、绿和蓝各颜色分段单独进行运算。 */ p { color: #010203 + #040506; } /* 同样算数运算也能将数字和颜色值一起进行分段运算. */ p { color: #010203 * 2; } /* 颜色运算,如果超值问题？最大值 ： 最小值 rgab(),alpha 不参与运算！ */ p { color: #F00F01* 3; border-color: #000001* 3; background: rgba(255,1,0,0.3)*3; }查看全部
-
//SCSS /* 在 Sass 运算中数字运算是较为常见的，数字运算包括： 加法、减法、乘法和除法等运算。 而且还可以通过括号来修改他们的运算先后顺序。 */ .box { width: ((220px + 720px) - 11 * 20 ) / 12 ; }查看全部
-
//SCSS /* 变量计算: */ $content-width: 720px; $sidebar-width: 220px; $gutter: 20px; .container { width: $content-width + $sidebar-width + $gutter; margin: 0 auto; } /* 列宽 ＝ 单列宽度 x 列数 + 列间距 x (列数 - 1) width = $col-width * $i + $col-gap * ($i - 1) */ $col-width: 60px; $col-gap: 20px; @for $i from 1 through 12 { .col-#{$i}{ width: $col-width*$i + $col-gap*($i - 1); } }查看全部
-
/* 列宽 ＝ 单列宽度 x 列数 + 列间距 x (列数 - 1) $col-width * $i + $col-gap * ($i - 1) */查看全部
-
//SCSS /* 除法: Sass 的乘法运算规则也适用于除法运算。 不过除法运算还有一个特殊之处。 众所周知,“/”符号在 CSS 中已做为一种符号使用 因此在 Sass 中，直接使用“/”符号做为除号时，将不会生效， 编译时既得不到我们需要的效果，也不会报错。 要修正这个问题， 1>只需要给运算的外面添加一个小括号( )即可. 2>如果“/”符号在已有的数学表达式中时，也会被认作除法符号。 3>，当用变量进行除法运算时，“/”符号也会自动被识别成除法 除法运算时，如果两个值带有相同的单位值时， 除法运算之后会得到一个不带单位的数值 */ .box { width: 100px / 2; } .box { width: (100px / 2); } .box { width: 100px / 2 + 2in; } $width: 1000px; $nums: 10; .item { width: $width / 100; } .list { width: $width / $nums; } .box { width: (1000px / 100px); } /* PS: 1 inch = 96 pixel (X/Y); 1 inch = 72 point (computer) */查看全部
-
//SCSS /* 减法: Sass 中的乘法运算与加法与减法运算还略有不同。 虽然他也能够支持多种单位（比如 em ,px , %）， 但当一个单位同时声明两个值时会有问题。 如果进行乘法运算时，两个值单位相同时， 只需要为一个数值提供单位即可。 Sass 的乘法运算和加法、减法运算一样， 在运算中有不同类型的单位时，也将会报错。 */ .box { width: 10px * 2; } /* .box { width:10px * 2px; } //20px*px isn't a valid CSS value. */ /* .box { width: 20px * 2em; } //40em*px isn't a valid CSS value. */查看全部
-
//SCSS /* 减法: //运算时碰到不同类型的单位时，编译也会报错， //Error: Incompatible units: 'em' and 'px'. */ $container: 960px; $sidebar-width: 220px; $gap-width: 20px; .content{ width: $container - $sidebar-width - $gap-width; float: left; } /* $full-width: 960px; .content { width: $full-width - 1em; } */查看全部
-
/* 你就会想到超级酷的 mixins，用来生成代码或者生成另一个 mixins。 然而，这并不完全是可能的。 第一个限制，这可能会很删除用于 Sass 变量的插值。 */ $margin-big: 40px; $margin-medium: 20px; $margin-small: 12px; @mixin set-value($size) { margin-top: $margin-#{$size}; } .login-box { @include set-value(big); } @mixin updated-status { margin-top: 20px; background: #F00; } //所以，#{}语法并不是随处可用，你也不能在 mixin 中调用： $flag: "status"; .navigation { @include updated-#{$flag}; }查看全部
-
//SCSS //插值#{} //当你想设置属性值的时候你可以使用字符串插入进来。 $properties: (margin, padding,border); @mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; } } .login-box { @include set-value(top, 14px); } //另一个有用的用法是构建一个选择器。 @mixin generate-sizes($class, $small, $medium, $big) { .#{$class}-small { font-size: $small; } .#{$class}-medium { font-size: $medium; } .#{$class}-big { font-size: $big; } } @include generate-sizes("header-text", 12px, 20px, 40px); // 幸运的是 Sass ，可以使用 @extend 中使用插值。 //因为他给了我们变量，可以动态的插入 .class 和 %placeholder。 %updated-status { margin-top: 20px; background: #F00; } .selected-status { font-weight: bold; } $flag: "status"; .navigation { @extend %updated-#{$flag}; @extend .selected-#{$flag}; }查看全部
-
嵌套编译的语法 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }查看全部
-
Gulp 配置 Sass 编译的示例代码 var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); gulp.task('watch', function() { gulp.watch('scss/*.scss', ['sass']); }); gulp.task('default', ['sass','watch']);查看全部
举报
0/150
提交
取消