Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em; 1.2 String 不加双引号的,加双引号的,加单引号的全部都属于String类型 String类型详细内容请点击这里, 下面是小demo 1.$s1: container;2.$s2: 'container';3.$s3: "…

Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护. 那么css预处理器与Sass有什么关系呢,Sass就是属于css预处理器中的一种,还有两款他们分别是Less和 Stylus,这里就不做过多的介绍了. 什么是Sass sass是一种css的开发工具,提供了很多便利的写法,不但使css…

基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS条件语句和循环的朋友会比较了解这些控制命令的功能所在,这些控制命令是 sass 的一个重要组成部分. @if,@else @if @else是一个简单的根据条件来处理样式块的SassScript,如果if的条件是true那么就调用if的样式块,否则就调用else的样式块,一个简单的代码示例 @mix…

一.@if 指令: @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @deb…

/*变量操作 (两个变量之间的运算符需要用空格隔开,否则会报错.)==,!= <,>,<=,>=+,-,*,/,% */ $width1:50px;$width2:100px;body{ width: $width1 + $width2; height: $width2 - $width1;} /*连字符号中间使用带空格的加号效果不变*/a:hover{ cursor:e-resize; /*等同于*/ cursor: e + -resize;} 注意:说明运算时sass只关注运算…

@if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @if...@else... 来判断传进参数的值来控制 display 的值.如下所示: //SCSS @mixin blockOrHidden($boolean:true) { @if $bo…

代码的重用 基础的部分我们讲述了变量 Mixin 这两种方法可以增加扩展和重用 现在开始继续学习:extend继承 .class1 { border: 1px solid #ddd; } .class2 { @extend .class1; font-size:%; } 引入外部文件 @import "path/filename.scss"; 引入后就可以用调用里边的变量和mixin,继承里边的类了 高级语法 @if可以用来判断: p { @if + == { border: 1px…

/*内置函数*/ /*1)常规的rgb,rgba函数*/$color:rgb(255,255,162);body{ color: $color; background-color:rgba($color, 0.5); /*2)lighten,darken函数*/ span{ color: darken($color,0.4);//颜色加深0.4倍 background-color: lighten($color,0.5);//颜色变浅0.5倍. }} /*str-length(),str-ind…

@mixin content($color:red,$fontSize:14px){ color:$color; font-size: $fontSize;} /*调用含参数的mixin,使用更加灵活1.传递多个属性的参数时需要指定变量名,否则将无法找到是哪个属性2.一个参数需传递多个参数值时,需在参数末尾加上三个点即表示可传递多个参数值:*/body{ @include content($color:blue,$fontSize:18px);} @mixin box-shadow($box-s…

这种判断语句要配合混合宏来使用 定义下一混合宏 @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } 调用混合宏 .block { @include blockOrHidden; } .hid…