sass自学入门总结

首先分享一个便利的在线编辑sassmeister

一、输出方式

同样的一份sass代码:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

1、嵌套输出方式 nested:
编译:

sass --watch test.scss:test.css --style nested
编译后:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

2、展开输出方式 expanded

编译:

sass --watch test.scss:test.css --style expanded
编译后:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
3、紧凑 输出方式 compact

编译:

sass --watch test.scss:test.css --style compact
编译后:

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
4、 压缩输出方式 compressed

编译:

sass --watch test.scss:test.css --style compressed
编译后:

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
二、基本特性

1、变量声明:


示例:

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;
!default 用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

2、全局变量与局部变量:
示例:

//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}
编译结果:

//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

当在局部范围(选择器内、函数内、混合宏内...)声明一个已经存在于全局范围内的变量时,局部变量就成为了全局变量的影子。基本上,局部变量只会在局部范围内覆盖全局变量。当在局部范围(选择器内、函数内、混合宏内...)声明一个已经存在于全局范围内的变量时,局部变量就成为了全局变量的影子。基本上,局部变量只会在局部范围内覆盖全局变量。

3、嵌套

(1)选择器嵌套

示例:

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>
css:

nav a {
  color:red;
}

header nav a {
  color:green;
}
sass:

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}
(2)属性嵌套

css:

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
sass:

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}
(3)伪类嵌套
css:

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}
sass:

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}
4、宏

声明一个不带参数的混合宏:

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

button {
    @include border-radius;
}
编译后:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
声明一个不带值的参数的混合宏:

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
调用:

.box {
  @include border-radius(3px);
}
编译后:
.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
声明一个带值参数的混合宏:
@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
调用:

.btn {
  @include border-radius;
}
编译后:
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
但有的时候,页面中有些元素的圆角值不一样,那么可以随机给混合宏传值,如:
.box {
  @include border-radius(50%);
}
编译后:

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
一个带多个参数的混合宏:
@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
调用:

.box-center {
  @include center(500px,300px);
}
编译后:

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}
有一个特别的参数“…”。当混合宏传的参数过多之时,可以使用参数来替代,如:
@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;
  }
}
调用:

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
编译后:

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}
5、继承

sass:

.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;
}
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;
}
6、占位符%placeholder
 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。来看一个演示:

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
这段代码没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码:
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

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

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}
编译后:

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

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

混合宏vs继承vs占位符

1、如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
2、如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承。
3、编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”

5、插值#{}

sass:

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}
css:

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}
这是 sass 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用:

sass:

@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);
css:

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }
但#{}语法并不是随处可用,你不能在 mixin 中这样调用:

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}
会有如下报错: error style.scss (Line 5: Undefined variable: “$margin-".)。$margin 报错是因为 $ 后面必须是变量,而 #{$size} 已经被转换成字符串无法跟前面组成变量,所有报错 $margin- 变量未定义。


也不能这样调用:

@mixin updated-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}

会有如下报错:error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")。@include 中不能使用,是因为其调用的是 混合宏 的名字。

@extend 中能够使用,是因为其调用的是 选择器 的名字。例如:

sass:

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}
css:

.navigation {
    margin-top: 20px;
    background: #F00;
}
.selected-status, .navigation {
    font-weight: bold;
}

总结一下:有两种情况不能使用插值:

①插值不能使用在属性,也就是:后边不能使用插值;
②插值不能使用在混合宏的调用中,如@include update-#{$flag}
6、数据类型

  •  数字: 如,1、 2、 13、 10px;
  •  字符串:有引号字符串或无引号字符串,如,"foo"、 'bar'、 baz;
  •  颜色:如,blue、 #04a3f9、 rgba(255,0,0,0.5);
  •  布尔型:如,true、 false;
  •  空值:如,null;
  •  值列表:用空格或者逗号分开,如,1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

三、基本运算

in mm cm pt pc px等绝对单位能运算,ex em rem等相对当前字体的不能运算,编译的时候,编译器会报错,如:“Incompatible units: 'em' and ‘px'.”

1、加法

sass:

.box {
  width: 20px + 8in;
}
css:

.box {
  width: 788px;
}

2、减法

sass:

$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}
css:

.content {
  width: 760px;
}
3、乘法

sass:

.box {
  width:10px * 2px;  
}
css:

.box {
  width: 10px * 2;
}
如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。
4、除法
sass:

p {
  font: 10px/8px;             // 纯 CSS,不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量,是除法运算
  width: round(1.5)/2;        // 使用了函数,是除法运算
  height: (500px/2);          // 使用了圆括号,是除法运算
  margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}
css:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }
5、颜色运算

sass:

p {
  color: #010203 + #040506;
}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09, 并且被合成为:

css:

p {
  color: #050709;
}

算数运算也能将数字和颜色值 一起运算,同样也是分段运算的。如:
sass:

p {
  color: #010203 * 2;
}

计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06, 并且被合成为:

css:

p {
  color: #020406;
}
6、字符运算

sass:

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}
css:

.box:before {
  content: " Hello Sass! ";
}















©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页