木灵鱼儿 1 年前 SASS

sass 函数

函数部分比较少用,有时间我再来细看,这里扒了一下简书的文章。文章来自:链接1. 字符串函数unquote($string):删除字符串中的引号;quote($string):给字符串添加引号;To-upper-case($string):将字符串小写字母转换为大写字母To-lower-case($string):将字符串大写字母转换为小写字母(1) unquote($string)unquote函数主要功能是删除字符串中的引号:不管是双引号还是单引号包裹的字符串,引号皆被去掉;只能删除字符串最前边和最后边的引号,没法去掉中间的引号;如果字符串没有带引号,则返回原字符串;若引号中,有半个不...

0
0
木灵鱼儿 1 年前 SASS

@extend 继承

sass支持继承css属性,一般来说,我们的css继承是从父元素继承一部分可以继承的属性,比如color,font啊,这些,但是如果我们书写一个button按钮,样式会复杂很多,我们会修改它的颜色,边框,内边距等等一系列的属性,但是这些属性我们可能复用很多部分。但一般来说我们不可能对button这个元素名进行样式修改,而是单独建立一个class名来进行样式定制,但就是因为这样,后面如果还有多个button元素,我们可能会不断重复书写一些相同的代码。sass可以通过@extend 去继承某一个class的属性,并且本身也能够进行变动。.button-basic { border: ...

0
0
@extend 继承
木灵鱼儿 1 年前 SASS

@mixin 和 @include

@minxin为混入,实际上可以理解为一个通用的变量,这个变量会将自身里面的属性全部return出去,和function一样,你调用我,我就给你返回一个内容。定义一个混入@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; }混入的名字为:important-text,并且这个名字使用了连接符号-,和class的命名一样,并且sass的连接符除了这个还可以使用下划线_,也就是可以写成:important_text调用混入body { ...

0
0
木灵鱼儿 1 年前 SASS

@import

sass可以将文件分割成多个片段文件,并通过一个scss文件引入这些片段,从而生成一个完整的css文件。首先我们要知道css3有一个 @import的属性,它可以引入本地或者外部文件,但是会生成一个http的请求,这就会导致网页的css渲染会发生延迟。而sass也支持这个属性,但是它的作用远不止如此。@import假设我们现在有两个sass文件,一个是主要的style.scss,一个用于初始化的reset.scss文件,我们要在style中引入reset;@import "reset"; body { font-family: Helvetica, sans-s...

0
0
木灵鱼儿 1 年前 SASS

嵌套

sass最大的也是最常用的功能就是嵌套了。#nav { ul { color:red; } }这种写法可以理解为:#nav ul { color:red; }当我们要对#nav下多个元素控制css样式的时候,嵌套就显得非常方便,因为父选择器我们只需要写一次。虽然说可以无限嵌套下去,但是如果你根据dom树的结构进行嵌套,你会发现维护起来非常麻烦,因为内容一多,你可能都不知道这个class的父级是谁,所以一般来说,sass的嵌套最好保持在四层以内。嵌套属性我们写css经常会有很多重复的前缀名,比如说font系列的前缀,background的前缀,前面都是相同的,只有后面部...

0
0
木灵鱼儿 1 年前 SASS

变量

sass支持变量,开头使用$符号表示,并且可以存储多种数据类型。字符串数字颜色值布尔值列表null 值例子$myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; }变量也是有作用域的。$myColor: red; h1 { $myColor: green...

0
0
加载中