Sass学习总结

最新推荐文章于 2020-06-14 18:23:10 发布

eason_ylf

最新推荐文章于 2020-06-14 18:23:10 发布

阅读量257

点赞数

分类专栏： CSS Sass WEB前端开发

WEB前端开发同时被 2 个专栏收录

132 篇文章 5 订阅

订阅专栏

CSS Sass

12 篇文章 0 订阅

订阅专栏

以下代码是基于scss格式的：

.sass与.scss的区别
“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。
.sass:

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color
   
   1
2
3
4
5
6

.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
   
   1
2
3
4
5
6
7

sass与scss格式的转换

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass
   
   1
2
3
4
5

命令行编译

#单文件
sass --watch input.scss:output.css
#多文件
sass --watch app/sass:public/stylesheets
   
   1
2
3
4

GUI 界面工具编译
Koala
Compass.app
Scout
CodeKit
Prepros

编译错误
1.要用UTF-8
2.文件路径及文件名不要用中文

输出方式
4.在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed

$ sass --watch test.scss:test.css --style nested
   
   1

变量
声明变量：sass离不开$

$width : 300px;
   
   1

普通变量 & 默认变量

$fontSize: 12px;
body{
    font-size:$fontSize;
}
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}
   
   1
2
3
4
5
6
7
8

局部变量 & 全局变量

//SCSS
$color: orange !default;//定义全局变量
.block {
  color: $color;//调用全局变量
}
em {
  $<span class="hljs-attribute">color</span><span class="hljs-value">: red;</span><span class="hljs-comment">//定义局部变量（全局变量 $color 的影子）
  a {
    color: $color;//调用局部变量
  }
}
   
   1
2
3
4
5
6
7
8
9
10
11

嵌套
选择器嵌套

nav {
  a {
    color: red;

    header & {  //其中&代表其所在位置的所有长辈元素
      color:green;
    }
  }  
}
   
   1
2
3
4
5
6
7
8
9

nav a {
  color:red;
}

header nav a {
  color:green;
}
   
   1
2
3
4
5
6
7

属性嵌套
主要用于padding ，margin，font等属性

.box {
  border: { top: 1px solid red;
   bottom: 1px solid green;
  }
}
   
   1
2
3
4
5
6

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
   
   1
2
3
4

伪类嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
}
   
   1
2
3
4
5
6
7

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
   
   1
2
3
4

混合宏
声明混合宏@mixin
1.不带参数的混合宏

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
   
   1
2
3
4

2.带参数的混合宏

//一个参数时，可以指定默认值
@mixin border-radius($radius:5px){//此时的5px为默认参数，传入其他值时覆盖该值
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
//传2个参数
@mixin center($width</span>, <span class="hljs-variable">$height){
...
}
//参数过多 ，一个特别的参数 （...）
@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.复杂的混合宏

@maxin 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);
    }
}
   
   1
2
3
4
5
6
7
8

调用混合宏@include

button{
    @include border-radius;
}
   
   1
2
3

不足之处
会产生冗余的代码块，如：

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13

编译生成的CSS为

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
   
   1
2
3
4
5
6
7
8
9
10

而理想的CSS为

.box, .btn{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.box{
    margin-bottom: 5px;
}
   
   1
2
3
4
5
6
7

占位符%placeholder
通过%placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

编译出来的CSS

.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}
   
   1
2
3
4
5
6
7

拓展/继承@extend
通过关键词 @extend来继承已经存在的样式块

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

生成的CSS

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
//代码进行了合并

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

小结：
这里写图片描述

插值#{}

$properties: (margin, padding);
@mixin set-value($side</span>, <span class="hljs-variable">$value) {
    @each $prop</span> <span class="hljs-keyword">in</span> <span class="hljs-variable">$properties {
        #{$prop</span>}-#{<span class="hljs-variable">$side</span>}: <span class="hljs-variable">$value;
    }
}
.login-box {
    @include set-value(top, 14px);
}
   
   1
2
3
4
5
6
7
8
9

编译出的CSS

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}
   
   1
2
3
4

不对的例子

$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;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注释
这里写图片描述

数据类型
数字

1，10px
   
   1

字符串

有引号字符串 (quoted strings)，如 “Lucida Grande” 、’http://sass-lang.com‘；
无引号字符串 (unquoted strings)，如 sans-serifbold。

在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。

@mixin firefox-message($selector) {
    body.firefox #{$selector}:before {
        content: "Hi, Firefox users!";
    }
}
@include firefox-message(".header");
   
   1
2
3
4
5
6

编译出来的CSS为

body.firefox .header:before {
    content: "Hi, Firefox users!";
}
   
   1
2
3

另外当 deprecated = property syntax 时（暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。

颜色

blue、 #04a3f9、 rgba(255,0,0,0.5)；
   
   1

布尔

true,false
   
   1

空值

null；
   
   1

值列表

//用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif
   
   1

更多用法：

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

运算
加、减、乘、除

加减注意单位一致，
乘除注意单位不能同时存在，
运算符和变量，数值中间用空格分开
   
   1
2
3

变量计算
数字运算

颜色计算:每两位进行运算

字符运算
用 + 串联
如果有引号的字符串被添加了一个没有引号的字符串（也就是，带引号的字符串在 + 符号左侧），结果会是一个有引号的字符串。同样的，如果一个没有引号的字符串被添加了一个有引号的字符串（没有引号的字符串在 + 符号左侧），结果将是一个没有引号的字符串。以等号左边的为准

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
   
   1
2
3
4

编译结果

p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}
   
   1
2
3
4

进阶

控制命令
@if @else @else if

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

编译出来的CSS

.block {
  display: block;
}

.hidden {
  display: none;
}
   
   1
2
3
4
5
6
7

@for

//2种方式
@for $i from <start> through <end> //包括 end 这个值
@for $i from <start> to <end> //不包括 end 这个数

//$i 表示变量
//start 表示起始值
//end 表示结束值
   
   1
2
3
4
5
6
7

看个例子

$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid</span>-prefix}#{<span class="hljs-variable">$i}{
    width: $grid</span>-width * <span class="hljs-variable">$i + $grid</span>-gutter * (<span class="hljs-variable">$i - 1);
    @extend %grid;
  }
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

编译出来的CSS

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.span1 {
  width: 60px;
}
   
   1
2
3
4
5
6
7
8
9

@while

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type</span>-width + <span class="hljs-variable">$types;
    }
    $types</span><span class="hljs-symbol">:</span> <span class="hljs-variable">$types - 1;
}
   
   1
2
3
4
5
6
7
8
9

编译出来的CSS

.while-4 {
  width: 24px;
}

.while-3 {
  width: 23px;
}

.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@each

@each $var in <list>

//$var 就是一个变量名，
//<list> 是一个 SassScript 表达式，他将返回一个列表值。
   
   1
2
3
4

举个例子

$list</span><span class="hljs-symbol">:</span> adam john wynn mason kuroir;<span class="hljs-regexp">//</span><span class="hljs-variable">$list 就是一个列表

@mixin author-images {
    @each $author</span> <span class="hljs-keyword">in</span> <span class="hljs-variable">$list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13

编译出来的CSS

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }
   
   1
2
3
4
5
6
7
8
9
10

字符串函数
unquote($string)：删除字符串中的引号
unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。
只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号

quote($string)：给字符串添加引号

使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。
同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错

To-upper-case()

To-lower-case()

数字函数
这里写图片描述

列表函数
这里写图片描述

Introspection函数
这里写图片描述

Miscellaneous函数
在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

if($condition</span>,<span class="hljs-variable">$if-true,$if-false)
>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px
   
   1
2
3
4
5

Map函数
这里写图片描述

颜色函数
RGB颜色函数
这里写图片描述

HSL函数
这里写图片描述

Opacity函数
这里写图片描述

@规则/指令(directive)
@import
默认情况是sass的@import，以下情况会用CSS的@import

如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询（media queries）
   
   1
2
3
4

@import "foo.scss";
@import "foo"
//都会引入foo.scss文件
@import "rounded-corners", "text-shadow";
//引入多个文件
//如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线
   
   1
2
3
4
5
6

嵌套 @import
虽然大部分时间只需在顶层文件使用 @import 就行了，但是，你还可以把他们包含在 CSS 规则和 @media 规则中。

@media
Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
   
   1
2
3
4
5
6

编译出来的CSS

.sidebar {
    width: 300px;
}
@media screen and (orientation: landscape) {
    .sidebar {
        width: 500px;
    }
}
   
   1
2
3
4
5
6
7
8

支持嵌套
@extend
@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

编译出来的CSS

.a {
  color: red;
}

.a .b {
  color: orange;
}

.a .b .c {
  color: yellow;
}

.d {
  color: green;
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@debug
@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:

@debug 10em + 12em;
   
   1

输出

Line 1 DEBUG: 22em
   
   1

@warn
@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。如：

@mixin adjust-location($x</span>, <span class="hljs-variable">$y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x</span><span class="hljs-symbol">:</span> <span class="hljs-number">1</span>px * <span class="hljs-variable">$x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y</span><span class="hljs-symbol">:</span> <span class="hljs-number">1</span>px * <span class="hljs-variable">$y;
  }
  position: relative; left: $x</span>; <span class="hljs-symbol">top:</span> <span class="hljs-variable">$y;
}
   
   1
2
3
4
5
6
7
8
9
10
11

@error
@error 和 @warn、@debug 功能是如出一辙。

@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要将#{$x}值设置在10以内的数";
  }

}

.test {
  @include error(15);
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14

编译时

你需要将15值设置在10以内的数 on line 7 at column 5
   
   1

        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css">
            </div>

eason_ylf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sass学习总结

以下代码是基于scss格式的：.sass与.scss的区别 “.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。 .sass:$font-stack: Helvetica, sans-serif //定...
复制链接

扫一扫

专栏目录