sass.scss简单入门

最近研究了一下sass和scss,清晰结构化,在某些地方的确强大,所以写了一篇入门教程,大概15分钟左右就能明白基本原理

什么是sass(css预处理器)

Sass官网上是这样描述sass的,sass是一门高于css的元语言,他能用来清晰地,结构化的描述文件样式,有着比普通css功能更加强大的功能,sass能提供更简洁,更优雅的语法,同时提供多种功能来穿件可维护和管理的样式表.

SASS 和 SCSS 有什么区别？

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

命令编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

单文件监听命令

sass --watch style.scss:style.css

GUI工具编译

自动化编译gulp

不同样式风格的输出方法

sass --watch style.scss:style.css --style compact

嵌套输出方式 nested

展开输出方式 expanded

紧凑输出方式 compact

压缩输出方式 compressed

$变量

普通变量

默认变量

$color:#ccc;
$color:#000 !default;

特殊变量(一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。)

1.应用于class和属性

2.应用于复杂的属性值

嵌套

选择器嵌套

属性嵌套

伪类嵌套

例:hover

a{
  color: #ff0000;
  &:hover{
    color: green;
  }
}

需要在:hover前加&,不然选择的是a里面的元素hover

混合宏 @mixin 引用  @include

1、声明混合宏

@mixin border($color1,$color2){
  border:1px solid $color1;
  border-radius: 5px;
  box-shadow: 4px 5px 3px 5px $color2;
}

2、调用混合宏

.aa{
  width: 200px;
  height: 200px;
  @include border();
}

3、混合宏的参数   传一个不带值的参数  如上图的$color1,$color2

4、混合宏的参数   传带值的参数 (默认值)  可以在$color1,$color2后面加默认值,如($color1:#ccc,$color2:#ddd)

Eg:

@mixin css3($attr,$val){
  -webkit-#{$attr}:$val;
  -moz-#{$attr}:$val;
  -ms-#{$attr}:$val;
  -o-#{$attr}:$val;
  #{$attr}:$val;
}
.bb{
  @include css3(border-radius,10px);
}

继承 @extend

.ee{
  width: 200px;
  height: 300px;
  @extend .bb;
}

占位符 %placeholder   @extend

%ff{
  width: 200px;
  height: 200px;
}
.g{
  @extend %ff;
}

只有在引入后占位符的样式才会生效

@import  引入另一个scss文件,一般引入公共样式

自定义函数@function

@function add($a,$b){
  @return $a+$b;
}
.k{
  width: add(200px,300px);
}

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。

数据类型Data Type

Sass -i   type-of()

1. 数字: 如，1、 2、 13、 10px；

2. 字符串：有引号字符串或无引号字符串，如，”foo"、 'bar'、 baz；

3. 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；

4. 布尔型：如，true、 false；

5. 空值：如，null；

6. 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em。

函数

1. 数字函数: abs()、round()、ceil()、floor()

2. 字符串函数：to-upper-case()、to-lower-case()、str-length()、str-index()

3. 颜色：rgb()、lighten()、darken()

4. 值列表：length()、nth()、index()、append()、join()

注释

注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式：

1、类似 CSS 的注释方式，使用 ”/*  */ ”

2、类似 JavaScript 的注释方式，使用“//”

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，

Sass的控制命令

1. @if

三目判断语法为：if($condition, $if_true, $if_false)

2. @for循环

@for $i from <start> through <end>

@for $i from <start> to <end>

3. @while循环

4. @each循环

@each $var in <list>