sass自学入门总结

最新推荐文章于 2024-08-12 17:40:36 发布

AryaoO

最新推荐文章于 2024-08-12 17:40:36 发布

阅读量612

点赞数

分类专栏： sass 文章标签： sass sass输出方式 sass基本特性 sass基本运算

本文链接：https://blog.csdn.net/Selina_Chan/article/details/78583954

版权

sass 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先分享一个便利的在线编辑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! ";
}

AryaoO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
sass自学入门总结

首先分享一个便利的在线编辑sassmeister一、输出方式同样的一份sass代码：nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px;
复制链接

扫一扫

专栏目录