模版网站如何建站,做网站需要注意事项,本科电子商务专业就业方向,协会网站建设模板本篇内容主要讲述css预编译器sass与less#xff1b;
Sass
sass(Syntactically Awesome Stylesheets)是css预处理器#xff0c;可帮助开发人员复用css代码开发#xff0c;节省开发时间#xff0c;安装方法官网见Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网
…
本篇内容主要讲述css预编译器sass与less
Sass
sass(Syntactically Awesome Stylesheets)是css预处理器可帮助开发人员复用css代码开发节省开发时间安装方法官网见Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网
gem install sass // mac安装sass
对sass文件进行编译需要用到命令sass
sass input.scss output.css // 单文件转换
sass --watch input.css:output.css // 单文件监听编译
sass --watch app/sass:public/stylesheets // 监听整个文件夹
另外编译出来的css文件支持四种排版方式展示(--style xxx方式)
nested嵌套 expanded扩展 compact紧凑 compressed压缩 Sass在css语法的基础上增加了变量、嵌套、混合、导入等高级功能
它支持两种语法格式scss(Sassy css)与最早的sass格式缩进格式前者以.scss作为文件扩展名较为常用后者以.sass作为文件扩展名使用“缩进”代替“花括号”表示属性属于某个选择器用“换行”代替“分号”分隔属性本篇讲解将以较为常用的第一种方式配合expanded排版方式作为讲解
嵌套规则nested rules
sass允许将一套css样式嵌套进另一套样式中内层的样式将它外层的选择器作为父选择器 父选择器
在嵌套css规则时有时也会需要直接将父选择器与子选择器连接在一起的情况如给某个选择器添加伪样式时需要与选择器紧紧挨在一块如a:hover则此时需要使用父选择器 这样编译后的样式就会变成 ul li:hover, 而不是ul li hover形式
必须作为选择器的第一个字符其后可以跟随后缀生成复合选择器如 属性嵌套
有些css属性遵循相同的命名空间如font-family/font-size都是以font作为属性的命名空间对于这类属性也可以利用sass语法 注释
sass同样支持单行注释//与多行注释/* */ 其中多行注释会包含在非压缩格式的css单行注释不会出现在被编译后的css文件中 将!作为多行注释的第一个字符则该注释也会包含在压缩格式下的css中
变量
变量以$开头赋值方法与css属性写法相同使用时直接调用即可 变量支持块级作用域嵌套规则内定义的变量只能在嵌套规则内使用局部变量不在嵌套规则内定义的变量则可在任何地方使用全局变量。将局部变量转换为全局变量可以添加!global声明 插值interpolation
该语法可用于在语法中使用变量使用方式采用#{$var}其中$var为某变量 数据类型
支持6种数据类型数字/字符串/颜色/布尔值/控制/数组list/maps
在命令行中输入如下命令可以开启sass的命令行编写
sass -i
数字可以包含单位如12px就是一个数字; 使用type-of()语法可以检查数据类型
字符串支持两种类型有引号字符串与无引号字符串 数组lists是指css中由空格或逗号分隔的一系列的值如margin: 10px 15px 0 0或者font-faceHelvetica,Arial,sans-seriflists中有length、nth、join、append、index方法
length
length用于检测list的长度类似于数组长度 nth
ntho用于访问list中的某一项接收两个参数第一个参数是要查找的某个lists第二个参数是要查找的第几项lists索引默认从1开始 join
join将两个lists连接在一起接收三个参数前两个参数是某个lists第三个参数是每个对象采用逗号(comma)/空格(space)或自动(auto)方式连接若不指定则默认是空格 append
append可以在lists最后添加新值接收两个参数第一个参数是某个lists第二个参数是要添加的新值 index
index用于查找某值在lists中的索引位置索引默认从1开始接收两个参数第一个参数是某个lists第二个参数是要查找的某个值 maps类似于js中的数组以键值对存在一般以包裹 maps中有length、map-get、map-keys、map-values、map-has-key及map-merge、map-remove方法
length
length用于得到某个maps的长度即共有多少键值对 map-get
map-get方法用于得到某个maps中的某个key的value值接收两个参数第一个参数是某maps第二个参数是要查找的key map-keys
map-keys方法用于得到某个maps中的所有key值接收一个参数及某maps map-values
map-values方法用于得到某个maps中的所有value值接收一个参数及某maps map-has-key
map-has-key方法用于查找某maps中是否包含某key返回布尔值 map-merge
map-merge方法用于将某两个maps连接在一起接收两个参数两个都为maps形式 map-remove
map-remove用于移除某maps的某个键值对接收多个参数一个是某maps第二个是要移除的key 运算
数字运算
支持,-,*,/,%运算也支持关系运算, , , 相等不等!运算与and或or非not运算
特别注意的是/运算经常被使用 支持abs(), round(), ceil(), floor(), max(), min()方法使用方式与js中一样 字符串运算
用于连接两个字符串同时若左侧是有引号字符串则后运算结果是有引号字符串反之若左侧是无引号字符串则后运算结果是无引号字符串(下面显示是有引号的只是展示出来的原因)
- , / 方法都会包含在字符串中使用*会报错 变为大小写分别为to-upper-case大写to-lower-case小写 str-index()方法用于查找某字符串中的某个字符所在索引值接收两个参数第一个参数是某字符串第二个参数是要查找的某字符 str-length用于查看某字符串有多少个字符接收一个参数 str-insert用于在某字符串中插入某字符串接收三个参数第一个参数为某字符串第二个参数是要插入的字符串第三个参数是插入位置 -Rule与指令
sass支持所有的css3-rules以及sass所特有的指令
mixin
混合指令用于定义可重复使用的样式
语法
mixin xxxmixin(参数1 参数2, ....) {// 样式
}
mixin alert {color: #f0f0f0;font-size: 12px;
}mixin warning($color, $font) {color: $color;font-size: $font
}
import
sass扩展了importd的功能允许其引入sass及sass文件被导入的文件将合并到同一个css文件中
include xxxsass文件
mixin也要采用引用的方式使用 另外如果需要导入scss或者sass文件但又不希望将其编译为css文件可将该文件的文件名前添加下划线(这种方式叫Partials)则sass就会识别到该文件不需要编译在导入时不需要加下划线
如将文件命名为_color.scsssass就不会编译该文件引入时采用
import color // 若为sass或scss为扩展名则不用加扩展名此处也不用加_
extend
extend使得某选择器的样式可以继承另一选择器的样式 被继承的选择器的子类选择器的样式都会被继承到extend中 同一个选择可以extend多个选择器若样式相同以最后引入的为准
.school-name {extend .name;extend .header;background-color: yellow;
}
if
用于条件判断if声明后面可以跟多个else if声明或者else声明 for
for指令可以在限定的范围内重复输出格式每次按要求对输出结果作出变动该指令包含两种格式
for $var from start through end {} // 第一种使用方式for $var from start to end {} // 第二种使用方式
二者区别在于利用through时遍历包含start与end的值而另为一种方式不包含end的值$var可以是任何变量 each
each相当于遍历lists(相当于遍历数组)
each $var, $val2, $val3,..., in $list {// 可接收多个参数$val
} while
while指令与js中一样
while 条件 {} function
顾名思义用于函数功能使用return返回
function xxxfunction(参数1, 参数2, ....,参数n) {} warn/error
warn/error用于给开发者提示一般与插值方法一起使用,warn不会编译出错误error会编译出错误 Less
Less也是一种预处理方法bootstrap中地址为Less 快速入门 | Less.js 中文文档 - Less 中文网
首先在node环境下先进行安装然后利用lessc进行编译
npm install less -g // 安装less
lessc less/style.less css/style.css // 将less文件编译成css文件
它的很多用法都与Sass相同下面简单介绍下不同的地方:
变量使用声明 Mixins混合
less中混合使用类选择器或id选择器定义使用时引入该类选择器或id选择器混合可以传入参数~
有8种方式
①普通混合指定义混合的语句也会被编译为css作为输出 ②不带输出的混合即定义混合的地方不会被编译 ③带参数的混合 可以传默认参数 或者指定传参命名空间 转义Escaping
有的时候可能不想将less中的语句进行编译希望按less中的代码原样输出此时就会用到转义方法语法形式为~“非转义语句” 插值
less中若变量作为选择器名或url使用时语法为{变量名}变量名为去掉的名称 继承
继承采用:extend(要继承的选择器)语法 若要继承某选择器下的全部特性可用all参数
