🔥🔥🔥Sass5分钟速通基础语法前言近来在项目中使用sass,想着学习一下,但官方写的教程太冗杂,所以就有了本文

前言

近来在项目中使用sass,想着学习一下,但官方写的教程太冗杂,所以就有了本文速通Sass的基础语法

Sass 是 CSS 的一种预编译语言。它提供了变量（variables）、嵌套规则（nested rules）、混合（mixins）等功能，并且完全兼容 CSS 语法。Sass 能够让复杂的样式表更有条理，并且易于在项目内部或跨项目共享设计。

使用变量

变量在Sass中的概念

使用美元符号$
注意声明的顺序
可以在一个变量中引入另一个变量
调用变量时依然使用美元符号加变量名
sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容

$demo-color: skyblue;
$demo-border: 1px solid $demo-color;
$demo_border = demo-border 
.header-border{
	border:$demo-border;
}
// 编译后
.header-border{
	border: 
}

嵌套CSS规则

使用Sass可以轻松将多个内容嵌套在一起而不用像CSS一项需要分开写

.content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
content article h1 { color: #333 }
content article p { margin-bottom: 1.4em }

符号&

将该符号后面的内容与其父元素直接进行连接适用于各种伪元素


article a {
  color: blue;
  &:hover { color: red }
}
/* 编译后  */
article a {
color: gray;
}
article a:hover{
	color: red;
}

群组嵌套

子元素会和父元素一一配对

.container {
  h1, h2, h3 {margin-bottom: 8px}
}
.container h1, .container h2, .container h3 { margin-bottom: .8px }

多种选择器

可以在嵌套层内使用多种选择器

.article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
// 编译后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

嵌套属性

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
// 编译后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

import

导入外部的scss文件,不需要添加后缀.scss
不可以导入css文件
Scss编译时,sass的@import规则在生成css文件时就把相关文件导入进来。
可以导入scss文件内的局部内容例如 import ./login/abc

!default

假如你写了一个可被他人通过@import导入的sass库文件，你可能希望导入者可以定制修改sass库文件中的某些值。 !default定义。变量被声明赋值了,那就用它声明的值，否则用!default

$fancybox-width: 400px !default;
$fancybox-width: 500px;
.fancybox {
width: $fancybox-width;
}
// 编译后
.fancybox{
width: 500px;
}

静默注释

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。

//普通注释编译后不会显示在css内
/*编译后会显示在css内 */

混合器(Mixin）

是Sass中用来重用样式代码的一种方式。通过混入，我们可以将一组样式属性集合成一个可重用的代码块。

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}
// 编译后
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

本文只是带你速通下基础语法更多细节请看官网

[[Sass中文官网]]www.sass.hk/

🔥🔥🔥Sass5分钟速通基础语法

前言