一、LESS
1.条件判断
在less中我们可以通过条件判断实现渲染不同的样式,有点像switch,不是通过if实现的,而是when实现
在when方法中添加条件时,不需要单位
当判断相等时,使用=实现,没有==和===
判断多个条件时使用and关键字,配合when使用 when and
判断非语句,使用not, when not
2.函数-Math
在less中我们可以像js中使用Math对象一样使用less中的数学函数
Floor():向下取整(参数可以带单位)
Ceil():向上取整
Round():四舍五入
Percentage():将数值转换为百分数,(参数如果带有%单位是无效的),参数只能是数字
sqrt():平方根
abs():绝对值
sin():sin函数
asin():arcsin函数
cos():cos函数
acos():arccos函数
tan():tan函数
atan();arctan函数
pi():返回π
pow(a,b):次方 a的b次方
mod(m,n):m对n取余
convert(m,n):数字之间的转换
unit(m,n):不转换情况下替换数字的单位
3.颜色定义函数
rgb():可以生产一个16进制的色彩值,标准色彩方法
语法：rgb(red,green,blue);
每个值都是0-255
rgba():rgba(red,green,blue,alpha)
红绿蓝透明度
hsl():表示色相,饱和度,亮度模式,是一种工业标准色彩模式
语法：hsl(h,s,l)
h:色相,表示某一个颜色(0-360)
s:饱和度,色彩的浓度,单位是百分数,0%表示灰色,100%表示纯色
l:亮度,单位也是百分比,0%表示黑色,100%表示白色
4.颜色通道
less中色彩通道的方法：
red():获取色中的红色通道
green():获取色中的绿色通道
blue():获取色中的蓝色通道
alpha():获取色中的透明度通道
hue():获取色中的色值通道,数字(0-360)
saturation():获取色中的饱和度通道,百分数
lightness():获取色中的亮度通道,结果是百分数
这七个通道方法都只能接受一个参数,这个参数就是某个颜色
灰色是由三个相同的通道组成的,值越小灰度越大
5.颜色操作
颜色操作类函数,用于处理色彩
fade():对色彩进行透明度处理
fade(color,alpha)
fade(red,0.4)
fadeIn():表示增加透明度,当第一个参数不是颜色时,得到的是一个16进制不透明的颜色,透明度大于1
fadeout():透明度减少,可以接受两个参数,第一个表示颜色,第二个表示透明度的变化,是一个百分数
greyscale():得到混合色灰色的颜色值,接受一个表示颜色的参数
mix():将两种颜色混合,默认情况下取两种颜色相加后的平均值,第三个参数表示取的数值,是百分比,表示色彩混合的一个权重
saturate():增加饱和度
参数1：颜色
参数2：饱和度的增加量
desaturate():减少饱和度
lighten():提高颜色亮度
参数1：颜色
参数2：提高的亮度
darken():降低颜色亮度
6.色彩混合函数
这个函数只做颜色处理,不处理图片
softlight:柔光处理
参数1：底色
参数2：添加色
hardlight:强光处理
参数1：底色
参数2：添加色
7.字符串方法
escape(str):将字符串做url转码
参数是需要转码的字符串,将空格,等号 等字符转义
e():表示对字符串不做编译
replace():替换字符串中的子串
参数1：源字符串
参数2：被替换的字符串
参数3：替换的字符串
8.命名空间
命名空间是用来约束管理变量的，解决，变量在作用域中混乱的问题，防止变量污染作用域。
设计模式中单体模式是实现命名空间管理的一种常见设计模式。
在less中引入了该思想，在less中我们可以通过命名空间来管理变量混合，以及方法
为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，防止重名的出现，以及更好的管理变量和混合
&：在less中表示该元素，注意，&符号要写在里面
注意，引用混合时，要将属性赋值给谁就要放在谁的里面
9.作用域
Less到底是一个什么样的作用域呢？
在less中，作用域更像是一个块作用域，定在块内部的变量在外界访问不到。
在less中，访问变量的顺序，就近原则，哪个变量离他近就使用哪个
对于函数，它的存在也是依赖块级作用域，定义在块内部的函数，在外界访问不到，
但是我们可以通过命名空间使用它。
对于变量，他的存在也是依赖于块级作用域，定义在块内部的变量，我们在外界访问不到，
但是我们也不能通过命名空间访问。变量更像是一种私有的。
10.文件引入
如果将css样式全部写在一个文件中很不方便,所以要分开
利用文件引入,在less文件之间创建依赖
语法：
@import 'filename';
通过import导入一个文件的内容,被导入的文件中的变量,混合,方法等内容在编译后会留在当前文件中,可以被调用使用
11.插值
如果我们需要将一个变量插入到一个字符串中,可以使用less的插值处理
语法：
@{key} //key是变量名字
二、Sass
1.简介
SASS 是一种css的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使css的开发变得简单可维护
sass 的本质是一种可以简化css工作流程的方式,可以帮助我们更简单的开发和维护css内容
sass 是ruby语言写的,因此电脑需要先安装ruby,mac已经自带了,Windows系统需要重新安装环境
ruby -v
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
//1.删除原gem源
gem sources --remove https://rubygems.org/
//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/
//3.打印是否替换成功
gem sources -l
//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
检查版本号
sass -v
//更新sass
gem update sass
//查看sass帮助
sass -h
一般情况sass文件会写为scss
sass index.scss index.css
sass index.scss>index.css
2.变量与作用域
变量定义：$key:value;
作用域对变量的影响：在作用域内部定义的变量,外部无法访问,是私有的
3.父选择器
在sass中可以通过&符号,在父选择器内部访问父选择器
选择当前选择器
4.属性嵌套
sass 允许对css的属性进行嵌套,通常是对复合属性进行嵌套
border-top-color ==>
border:{
top:{
color:red;
}
left:{
style:solid;
}
}
在css中对属性嵌套,当编译时,会根据嵌套的层级进行编译结果
5.混合
sass中混合作用是为了继承复用
语法：
定义：@mixin names($w,$h) {width:100px}
使用：@include names(100px,200px);
多参数混合：
6.继承
sass中的混合,与less中的方法有点像
sass中的继承,与less中的混合有点像
继承是用来实现对其他类或者元素或者id样式的继承
语法：
@extend 选择器;
sass不仅仅可以继承元素的名称的选择器,还可以继承自定义的元素名称
7.解决中文报错
在ruby中找到engine.rb文件,在该文件require XXXX 后边写上：
Encoding.default_external = Encoding.find('utf-8')
8.作用域对混合以及继承的影响
sass中：
定义在作用域内部的混合,在外部无法访问,只能在内部访问
定义在作用域内部的继承,在作用域外部是可以访问的,不管该选择器写在任何位置,都可以被继承到
less中：
less的混合与sass的继承比较像,less定义在作用域内部的混合,外部不能直接访问,需要通过命名空间进行访问
less的方法和sass的混合比较像,less定义在作用域内部的方法,在外部不能直接访问,需要通过命名空间访问
9.占位符
我们自定义一个选择器样式,用于继承,继承结束,我们不想要这个选择器了,删掉它
此时可以使用占位符,表示定义一组临时属性,当 编译结束 就立马被删除
占位符只能用于标签选择器,其他选择器不能用
语法：
%div{}
%mydiv{}
10.数字运算
sass中也有+-*/ 运算,可以进行数字变量之间的运算,可以带单位运算
带有单位运算时：默认是px,哪个单位在前边,最终结果就以哪个单位为标准
除法有点特殊：
1) 加上()
2) 变量或者是函数的返回结果
3) 除法运算只是表达式的一部分
满足以上任何一个条件都可以
11.色彩运算
sass中支持色彩的加减乘除,注意除法要满足上边的数学运算中的条件
16进制的色彩运算,每个通道进行独立运算,
如果十六进制色彩每个通道的值大于255或小于0,不会影响其他通道,大于255取255,小于0取0
在rgba下,进行运算时,要求透明度必须一致,否则无法运算,最终结果不会影响透明度
12.插值与字符串拼接
插值：
为了动态创建属性
语法：
#{$dir}
字符串拼接：
+ 拼接两个字符串,没有''
no + -repeat
$re:-repeat
no + $re
13. if语句
语法：
@if 定义if语句
@else if 定义 else if 语句
@else 定义 else 语句
or 或 and 与 not 非
判断相等使用：== <= >= < >
14. for循环
语法：
@for $i from start through end{
//循环体
}
@for:定义for循环
$i:循环变量
start:$i的初始值,包含start
end:$i的结束值,包括end
from:从哪里开始
through:到哪里结束
15. while循坏
语法：
@while 条件 {}
$i : 0;
@while $i < 20{
//循环体
$i:$i+1;
}
16.三元运算符
if(条件,true结果执行,false结果执行)
扫一扫
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
