最好用的css辅助工具——SASS&LESS
前言 |
首先,小编给大家解释一下什么是SCSS和LESS,Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compasss)有助于更好地组织管理样式文件,以及更高效地开发项目。
同样,Less 也是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
我相信,在大家的心中会与这么一个疑问,css真的是属于我们程序猿的语言吗?因为它不需要逻辑,只需要像写作文一样就可以将一个静态页面给“写”出来。而且,在平时的css编译中,我想大家最在意的就是样式的权重吧。简单的样式还好,复杂样式那从根目录开始的辣末长的选择器真心让人不忍直视。所以,为了照顾我们程序猿那么懒得生物,大神们编译了SCSS和LESS。他们最大的优势就是可以将css进行类似于逻辑编译。
一、最常用的辅助工具——SCSS |
虽然SASS和LESS同样为css辅助工具,但是大部分都比较喜欢使用SASS,想要知道原因,让小编给你解释!
1.1SCSS基本语法
1、scss中的变量
声明变量:$变量名:变量值;
而且,在SCSS中,允许将变量嵌套在字符串中,但是变量必须使用 ${} 包裹
$width :100px;
$position:left;
#div1{
width: $width;
height: $width/10;
background-color: red;
border-#{$position}:10px solid yellow;
}
看到声明变量的$符,是不是觉得很熟悉?没错!jQuery中的获取节点使用的也是$。所以在大部分的网页编译中,大部分都使用scss,便是为了编译时更舒服。不会有使用两种语言的感觉。
2、scss中的运算,会将单位进行运算,使用时需注意最终的单位是否正确。
eg:10px * 10px =100 px*px;
3、scss中的嵌套:选择器嵌套 属性嵌套 伪类嵌套
在scss的使用中,我们通常把选择器嵌套和伪类嵌套一起使用。因为这会极大地节省scss的代码量;
①选择器嵌套 ul{li{}}
嵌套默认表示后代选择器,如果需要子代选择器,可以在选择器前加>;可以在选择器的{}中,使用&表示上一层的选择器。
②伪类嵌套: li{&:hover{}}
在选择器的{}中,使用&配合伪类事件,可以表示当前选择器的伪类。
section{ background-color: #CCC;
p{color: red;}
ul{
padding: 0px;
li{
list-style: none;
&:hover{
background-color:red;
}
font:{
size:16px;
weight:bold;
family:"微软雅黑";
style:"italic";
}
} }
}
③ 属性嵌套: font:{size:18px;}
对于属性名有-分割为多段的属性,可以使用属性嵌套,属性名的前半部分必须紧跟一个:才能用{}包裹属性的后半部分。
font:{
size:16px;
weight:bold;
family:"微软雅黑";
style:"italic";
}
属性嵌套类似于声明一的对象;对象名为属性名-以前的名字;对象里面的键名为-以后的属性名;值为想要设置的值;
4、注释
//注释一:编译时不会被编译到css文件中
/*
注释二:在非compressed压缩模式下,会被编译到css文件中。
* */
/*!
注释三:重要注释。在各种压缩模式下,都会被编译到css文件中
* */
1.2混合宏、继承、占位符
1、混合宏:使用@mixin声明混合宏,在其他选择器中使用@include调用混合宏。
混合宏有三种方式;
第一种方式:无参数;
@mixin hunhe{} .class{@include hunhe;}
@mixin hunhe(){
color: $color;
}
.class1{
@include hunhe;
background-color: blue;
}
第二种方式:有参数无默认值;
@mixin hunhe(@param){} .class{@include hunhe(value);}
@mixin hunhe($color){
color: $color;
}
.class2{
@include hunhe(green);
background-color: yellow;
}
、
第三种:有参数有默认值;
@mixin hunhe(@param:value){} .class{@include hunhe();}
@mixin hunhe($color:red){
color: $color;
} .class3{
@include hunhe;
background-color: blue;
}
优缺点:
优点:①可以传参 ②不会产生同名的class
缺点:调用时,会把混合宏中所有的代码copy到选择器中,产生大量重复代码
2、继承:声明一个普通class,在其他选择器中使用@extend继承这个class;
.class{ } .class{ @extend.class1;}
//继承
.class1{
color: red;
}
.class{
@extend.class1;
background-color: yellow;
}
优缺点:
优点:将相同代码,提取并集选择器,减少冗余代码;
缺点:①不能传参;②会产生出一个多余的class;
3、占位符:使用%声明占位符,在其他选择器中使用@extend 继承占位符;
%class1{} .class1{@extend %class1;}
//占位符
%class1{
color: red;
}
.class4{
@extend %class1;
background-color: yellow;
}
.class5{
@extend %class1;
background-color: blue;
}
优缺点:
优点:①将相同代码,提取到并集选择器,减少冗余代码;②不会生出一个多余的代码
缺点:不能传参
1.3条件语句、循环、函数
scss作为css的辅助工具,赋予了css类似于js的一些功能,例如循环、if条件语句、函数等;其中,一定要记得@符号的使用!!!
1、if条件结构:
条件结构需要卸载选择器里面,条件结构的大括号直接包裹样式属性。
@if 条件{}
@else{}
//scss中的条件语句 .class6{
width: 100px;
height: 100px;
@if 1>2{
background-color: yellow;
}@else{
background-color: green;
}
}
2、for循环:有着两种方式,类似于开区间和闭区间;
@for $i from 1 to 10{} //不包含10
@for $i from 1 through 10{} //包含10
//for循环
@for $i from 1 through 10{
.border-#{$i}{
border:#{$i}px solid yellow;
}
}
3、while循环;
先使用$符定义一个变量,然后进行条件判断,在{}中进行循环;
//while循环
$i:0;
@while $i<10{
.while-#{$i}{
border:#{$i}px solid red;
}
$i:$i+1;
}
4、each 循环遍历
@each $item in a,b,c,d{
//$item 表示a,b,c,d的每一项
}
//each循环遍历
$i:0;
@each $item in c1,c2,c3,c4{
$i:$i+1;
.#{$item}{
border:#{$i}px solid red;
}
}
5、函数
scss也可以想js一样进行函数的调用;
@function func($num){
@return $num * 2;
} .funcTest{
width: func(10px);
}
二、LESS |
less作为和scss同等地位的css辅助工具,在一些方面有着相同点,另一方面也有这他的优点;
2.1less基本语法
1、声明变量:@变量名:变量值
使用变量:@变量名
相对于scss,less变量的声明使用@符号;并且,变量一般使用在多次频繁出现的值,后期需要统一修改的值,牵扯到数值运算的值,推荐使用变量
>>>less中的变量类型
在css中出现的属性值,在less中都可以用作变量名
①数值类: 不带单位的 123 带单位的 1px
②字符串:带引号的 "hahahaah" 不带引号的 red #ff0000
③颜色类: red #ff0000 RGB(255,255,0)
④值列表类型: 多个值用逗号或空格分隔 10px solid red
@color :#ff0000;
@length:100px;
#div{
width: @length;
height:@length*2;
background-color: @color;
}
2、混合(Mixins),我们也亲切的叫做“米心”;相当scss的混合宏,同样有着三种方式:
①无参数混合;实际上就是一个普通的class选择器,会被编译到css文件中;
声明: .class{}
调用:在选择器中,使用.class;直接调用
//无参数混合
.borderRadius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
②有参无默认值混合:
声明:.class(@param){}
调用:.class(paramValue);
//有参无默认值混合
.borderRadius1(@radius){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.class{
width: 10px;
height: 10px;
.borderRadius1(10px);
}
③有参有默认值混合:
声明:.class(@param:10px){}
调用:.class(paramValue); 或 .class();
//有参有默认值混合 .borderRadius2(@radius:10px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
} .class{
width: 10px;
height: 10px;
.borderRadius2();
}
>>>如果声明时没有给参数赋默认值,则调用时必须赋值,否则报错;
有参混合,在编译时,不会出现在css文件中;
2.2匹配、@argument、嵌套
1、LeSS的匹配默认
①声明,类似于switch语句;
@pipei(条件一,参数){} @pipei(条件二,参数){} @pipei(@_,参数){}
②调用:
@pipei(条件的值,参数的值){}
③匹配规则:
根据调用时输入的条件值,去寻找与之匹配的混合执行;
/*匹配模式*/
.pipei(lefts,@width:10px){
margin-left: @width;
}
.pipei(rights,@width:10px){
margin-right: @width;
}
.pipei(tops,@width:10px){
margin-top: @width;
}
.pipei(bottoms,@width:10px){
margin-bottom: @width;
}
.pipei(@_,@width:10px){
padding:10px;
}
@position:leftssssss;
//当上述条件都不符合时执行,相当于default;
.class1{
.pipei(@position,20px);
}
2、@arguments 特殊变量:
在混合中,@arguments表示混合传入的所有参数。@arguments中的多个参数,用空格分隔。
/*@arguments*/
.argu(@width,@style,@color){
//border:@width @style @color;
border:@arguments;
}
.class2{
.argu(10px,solid,red);
}
4、Less嵌套
less中允许css选择器按照HTML的结构进行嵌套。 相当于scss的选择器嵌套与伪类嵌套的组合;
/*less嵌套*/ section{
width: 800px;
height: 200px;
background-color: #cccbbb;
>p{
color: blueviolet;
font-size: 20px;
font-weight: bold;
} ul{
padding: 0px;
list-style: none;
li{
display: block;
float: left;
width: 200px;
height: 50px;
background-color: yellow;
text-align: center;
&:hover{
background-color: cornflowerblue;
}
}
}
}
有两点值得注意;
①less的嵌套,默认是后代选择器。如果需要自带选择器,需要在前面加>;
②&符号,表示这个&所在的上一层表达器;比如上述嵌套:&:hover相当于section ul:hover
三、less&scss的使用 |
作为css的辅助工具,需要其操作环境最终还要转为css才能实现网页的布局;使用less直接创建Less文件就可以了吗?不,我们通常使用Koala进行less或scss到css的转换;
将less或scss的文件夹拖进koala的主页中,就可以随心所欲的编译了!!
编者按 |
对于一些简单的 项目,使用不使用scss和less并无区别,可在一些难度较大、比较复杂的项目上,less或scss就很有必要了。既节省我们的时间,有提高效率,一举多得!!!
最好用的css辅助工具——SASS&LESS的更多相关文章
- css编译工具Sass中混合宏,继承,占位符分别在什么时候使用
//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- 2015年最佳的12个 CSS 开发工具推荐
CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- [转]VS2010几款超赞的扩展辅助工具总结
前言 前两天刚把公司电脑系统和开发环境的重新安装http://www.cnblogs.com/aehyok/p/3603149.html, 主要是由于公司电脑配置稍微低了一些,运行.调试太慢,又因为要 ...
- linux下gitflow辅助工具安装和使用
gitflow是一个确保nvie推荐的git branch分支策略最佳模型得到有效实施的辅助工具.它作为git的一个子命令而存在. http://nvie.com/posts/a-successful ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
随机推荐
- 原创 :nfs软件服务利用ansible实现一键化部署
[root@m01 tools]# cat nfspeizhi.shcat >>/etc/exports<<EOF /data 172.16.1.0/24(rw,sync)EO ...
- Git 入门篇
什么是Git Git是Linux发明者Linus开发的一款新时代的版本控制系统. Git安装 Mac:https://sourceforge.net/projects/git-osx-instal ...
- Java filter拦截器的使用
1.web.xml配置 <!-- 验证是否登录 拦截功能 --> <filter> <filter-name>isLogin</filter-name> ...
- Linux-mknod命令(9)
mknod命令用于创建字符设备文件和块设备文件 (ls /dev -l 结果显示b开头和c开头的,即标识了块设备和字符设备.) 为了管理设备,所以设备中都有两个设备号: 主设备号:为了区分不同类型的 ...
- JavaScript学习日志(六):事件
这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...
- java.lang.OutOfMemoryError 解决程序启动内存溢出问题
java.lang.OutOfMemoryError: Java heap space Myeclipse里面部署的java web项目,浏览器访问的时候出现错误: type Exception re ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- Oracle数据库中直方图对执行计划的影响
在Oracle数据库中,CBO会默认目标列的数据在其最小值low_value和最大值high_value之间均匀分布,并按照均匀分布原则,来计算目标列 施加查询条件后的可选择率以及结果集的cardin ...
- Alpha阶段-个人总结
一.五个问题 1.第三章中提到了"质量"和"按时交付"的问题,我想问,世事难料,当两者不能兼得的时候,我是保证质量却无法按时交付,还是水两下保证按时交付呢? 2 ...
- 事后诸葛亮分析(Beta阶段)
设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决用户想要随时锻炼四则运算能力的问题:定义的很清楚:有清晰描述. 2.是否有充足的时间来做计划? ...