首页 > 代码库 > less与sass书写--敲代码的伙伴koala（考拉）
less与sass书写--敲代码的伙伴koala（考拉）
新软件：koala
koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，
帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
学习其中的两种代码转换与书写（less/sass）
less 的书写内容和相关属性
//less中的注释，但这种不会被编译
/*
* 这也是less中的注释，但是会被编译
*/
【less中的变量】
1、声明变量： @变量名字：变量值
2、使用变量： @变量名
>>>less中变量的类型
① 数字类 1 10px ②字符串: 无引号字符串red 有引号字符串"haha"
③ 颜色类 red #000000 ragb() ④值列表类型：用逗号或者分隔 10px solid 10px
>>>变量使用规则：
多次频繁出现的值、需要更改的值，设为变量
2、混合(MiXins)
① 无参混合
声明： .name{} 选择器中调用： .name
② 带参混合
无默认值声明： .name(@param){} 调用： ，name(parvalue);
有默认值声明： 。name(@param:value){} 调用： .name(parvalue); parvalue可省
>>>如果声明时。参数没有默认值，则调用时必须赋值，否则报错！
>>>无参混合，会在CSS中编译除同名的class选择器，有参的不会；
3、LESS的匹配模式
使用混合进行匹配，类似于if结构；
>>>声明： .name(条件一，参数){} .name(条件二，参数){} .name(@_，参数){}
>>>调用 .name(条件值，参数值)；
>>>匹配规则：根据调用时提供的条件值，去寻找与之匹配的“MiXins”执行。其中@_ 表示永远需要执行的部分
4、LESS中的运算
+ - * /
颜色运算时，红绿蓝分三组计算。 组内可进位，组间互不干涉
sass 的书写内容和相关属性
@charset "Utf-8";
{
margin: 0px;
padding: 0px;
font-family: "微软雅黑",sans-serif;
font-size: 16px;
}
//注释一：不会被编译
/*
* 注释二：非压缩模式，会被编译
*/
/*！
* 注释三：重要注释，压缩模式下也会被编译
*/
1、sass中的变量：
使用$变量名：变量值，声明变量；
如果变量需要在字符串中嵌套，则需要使用井{}包裹
border-井{$left}:10px solid blue;
2、Scss中的运算，会将单位也进行运算。使用时需要注意最终单位
10px*10px=100px*px
3、Sass中的嵌套： 选择器嵌套 属性嵌套 伪类嵌套
选择器 嵌套ul{li{}}后代
ul{>li{}} 子代
&:表示上一层 div{ul{li{&=="div ul li"}}}
属性嵌套：属性名与{之间必须有：例如border：{color：red；}}
伪类嵌套：ul{li{&：hover{"ul li:hover"}}}
4、混合宏、继承、占位符
①混合宏：声明 @mixin name($paranm:value){}
调用 @include name(value)；
>>> 声明时，可以有参，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范。同less
>>> 优点：可以传参
>>> 缺点：会将混合宏中代码，copy到对应的选择器中，产生冗余代码。
②继承：声明 .class{} 调用：@extend .class；
>>>优点：继承的相同代码，会提取出并集选择器中，减少冗余代码；
>>>缺点：无法进行传参、 会在CSS中，生成一个同名class
③占位符：声明 %class{} 调用：@extend %class；
>>>有点：继承的相同代码，会提取出并集选择器中，不会生成同名的class选择器；
>>>缺点：无法进行传参；
综上所述：当需要传递参数时，使用混合宏；当有现成class时用继承；当不需要参数，也不需要class时，用占位符
5、if条件结构：
@if 条件{}
@else{}
6、for循环结构：
@for $i from 1 to 10{} 不含10；
@for $i from 1 through 10{} 包含10；
7、while循环结构
$j:1;
@while $j<10{
.while井$j{
border:井{$j}px solid red；
} $j:$j+1;
}
8、each循环遍历
@each item in a,b,c,d{
// item 表示每一项-
}
9、函数
@function func($length){
$length1:$length*5;
@return $length1;
}
调用： func(10px);
less与sass书写--敲代码的伙伴koala（考拉）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。