SASS SCSS安装使用常用方法_sass安装

作者：我家自动化 | 2024-03-13 03:20:20

踩

sass安装

安装sass（个人选择ruby安装）

安装Ruby：下载Ruby.2.2.3(*64) 建议安装在c盘选中第二个选项，接下来安装sass
安装sass：1. 打开控制台，gem install sass 【如果命令受限 sudo gem install sass 用这个】
2. gem install <把下载的安装包拖到这里>
查看是否安装sass成功：sass -v 【出现sass 3.4.11 seletave】表示安装成功
更新sass：gem update sass 然后出来一段表示已最新
卸载sass：gem uninstall sass

ou用scss

scss注释要用css的注释 js类的注释只会在scss里显示
中文注释会报错，@charset "UTF-8";一定要写在scss顶部否则中文注释报错
$KaTeX parse error: Expected '}', got '#' at position 40: \dotsunded { border-#̲{$ side}-radius: 5px;} 属性的话要加#号
$btn-primary-color : #fff !default; 如果值后面加上!default则表示默认值。
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default; 2覆盖1.5，如果1.5没加默认就是1.5覆盖2
$b t n - p r ima ry - b or d er : d a r k e n ($ btn-primary-bg, 5%) !default;
可以定义全局变量和局部变量

    @mixin border-radius($radius:5px){                 【混合宏】
        -webkit-border-radius: $radius;
        border-radius: $radius;
    }
    @mixin box-shadow($shadow...) {    //【复杂的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。】
      @if length($shadow) >= 1 {
        @include prefixer(box-shadow, $shadow);
      } @else{
        $shadow:0 0 4px rgba(0,0,0,.3);
        @include prefixer(box-shadow, $shadow);
      }
    }
    .box {@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));}    【调用上面的混合宏】
        @mixin border-radius{
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    button {
        @include border-radius;
    }    //【调用之前定义好的混合宏】
    
    @mixin border-radius($radius){
      -webkit-border-radius: $radius;
      border-radius: $radius;
    }

    .box {
      @include border-radius(3px);
    }   //  【在调用的时候可以给这个混合宏传一个参数值：】
    .btn {
      @include border-radius(50%);
    }    【不用混合宏的值  可以自己定义值】
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：

    @mixin center($width,$height){
      width: $width;
      height: $height;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -($height) / 2;
      margin-left: -($width) / 2;
    }
    // 在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的：【全部调用出来】
    .box-center {
      @include center(500px,300px);
    }
    .btn {
      border: 1px solid #ccc;
      padding: 6px 10px;
      font-size: 14px;
    }
    .btn-primary {
      background-color: #f36;
      color: #fff;
       @extend .btn;
    }    //  【继承】

    %mt5 {
      margin-top: 5px;
    }
    .btn {
      @extend %mt5;
    }           //【如果不调用的话   %这段代码不会出现 在css里】这个叫占位符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

[Sass]插值#{}

>$properties: (margin, padding);                         
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}
$margin-big: 40px;                             
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}
%updated-status {                                 
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}

>$properties: (margin, padding);
    @mixin set-value($side, $value) {
     @each $prop in $properties {
   \#{$prop}-#{$side}: $value;
    }
}
.login-box {
 @include set-value(top, 14px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

-  nth函数（nth function） 可以直接访问值列表中的某一项；
-  join函数（join function） 可以将多个值列表连结在一起；
-  append函数（append function） 可以在值列表中添加值； 
-   @each规则（@each rule） 则能够给值列表中的每个项目添加样式。

>  .box {            【算法   单位必须相同   不能px - em】
  width: 20px + 8in;
}
$list: twitter,facebook,github,weibo;

>  @for $i from 1 through length($list){
  .icon-#{nth($list,$i)}{
    background-postion: $list -$i * $i;
  }
}   【循环传值   乘法】
.box {                       【除法必须加小括号 ()】
  width: (100px / 2);  
}

>$width: 1000px;                      【变量除法】         乘除法大于加减
$nums: 10;
.item {
  width: $width / 10;  
}
.list {
  width: $width / $nums;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

SCSS

 p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
.box {                             【两个带单位的值除法   出来的值是没有单位的】
  width: (1000px / 100px);
}
p {                                        【颜色值计算   两位两位加   结果为：050709】
  color: #010203 + #040506;
}
$content: "Hello" + "" + "Sass!";         【字符串进行连接】
.box:before {
  content: " #{$content} ";
}
div {
  cursor: e + -resize;
}
p:before {                      【有引号的加没引号的    哪个在前就是哪个】
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

这里$i 表示变量

start 表示起始值 ==1
end 表示结束值 ==3】

@for $i from 1 to 5 {
  .item-#{$i} { width: 2em * $i; }
}   【如果换成to就是表示循环当前写的数目-1】
//SCSS
$types: 4;                                           【while循环】
$type-width: 20px;

>@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
$list: adam john wynn mason kuroir;//$list 就是一个列表      【each循环   循环着将list里的变量名成为图片】
    @mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

    .test1 {
        content:  unquote('Hello Sass!') ;
    }

    .test3 {
        content: unquote("I'm Web Designer");
    }

    .test5 {
        content: unquote('"Hello Sass!"');
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

字符串函数只能删除开头和结尾的引号

quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 “”。如：

//SCSS
.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}
编译出来的 css 代码：

//CSS
.test1 {
  content: "Hello Sass!";
}
.test2 {
  content: "Hello Sass!";
}
.test3 {
  content: "ImWebDesigner";
}
.test4 {
  content: "";
}
使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

.test1 {
    content:  quote(Hello Sass);
}
这样使用，编译器马上会报错：

error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')
解决方案就是去掉空格，或者加上引号：

.test1 {
    content:  quote(HelloSass);
}
.test1 {
    content:  quote("Hello Sass");
}
同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：


//SCSS
.test {
  text: to-upper-case(aaaaa);      【一个转换大写  一个转换小写】
  text: to-upper-case(aA-aAAA-aaa);
}//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

在编译的时候带上参数“ --style expanded”: 换行
在编译的时候带上参数“ --style compact”: 紧凑
在编译的时候带上参数“ --style compressed”: 压缩性
Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“–sourcemap” 参数：sass --watch --scss --sourcemap style.scss:style.css

那么最关键的问题来了，如何在编译sass的时候指定输出风格，接下来我会分享命令行和gulp两种方法：
1.命令行编译：
sass --watch style1.scss:style1.css --style compressed
嘛，其实很简单，就是在原来编译指令的后面加了 --style 输出风格
所以只要依据需求，把compact,compressed这样的参数写在–style后面就行

2.gulp编译：
gulpfile.js代码如下：

   var gulp = require('gulp');
   var sass = require('gulp-sass');
   gulp.task('sass', function () {
   return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
1
2
3
4
5
6
7

其实这个大家应该也能看得出来，就是在原本sass()中加了一个参数outputStyle:‘编译风格’。
tips:在不指定风格的情况下，默认为嵌套输出。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

SASS SCSS安装 使用 常用方法_sass安装