Less & Sass
- //LESS源码
- @color:#4D926F;
- #header{
- color:@color;
- }
- h2{
- color:@color;
- }
- /*编译后的CSS*/
- #header{
- color:#4D926F;
- }
- h2{
- color:#4D926F;
- }
2.混合:指在一个 CLASS 中引入另外一个已经定义好的的 CLASS,就像在当前 CLASS 中增加一个属性一样。Less实现了这种嵌套。我们还可以使用参数,就好像我们再用一个函数一样。
- //LESS源码
- rounded-corners(@radius:5px){
- border-radius:@radius;
- -webkit-border-radius:@radius;
- -moz-border-radius:@radius;
- }
- #header{
- .rounded-corners;
- }
- #footer{
- .rounded-corners(10px);
- }
- /*生成的CSS*/
- #header{
- border-radius:5px;
- -webkit-border-radius:5px;
- -moz-border-radius:5px;
- }
- #footer{
- border-radius:10px;
- -webkit-border-radius:10px;
- -moz-border-radius:10px;
- }
3.嵌套:可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
- //LESS源码
- #header{
- h1{
- font-size:26px;
- font-weight:bold;
- }
- p{
- font-size:12px;
- a{
- text-decoration:none;
- &:hover{border-width:1px}
- }
- }
- }
- /*编译后的CSS*/
- #header h1{
- font-size:26px;
- font-weight:bold;
- }
- #header p{
- font-size:12px;
- }
- #header p a{
- text-decoration:none;
- }
- #header p a:hover{
- border-width:1px;
- }
4.函数与运算:运算提供了对属性值和颜色的加、减、乘、除操作,赋予你创建属性之间复杂关系的能力。运算应当只出现在圆括号中,这样能确保与CSS的兼容。
- //LESS
- @the-border:1px;
- @base-color:#;
- @red:#;
- #header{
- color:(@base-color*);
- border-left:@the-border;
- border-right:(@the-border*);
- }
- #footer{
- color:(@base-color+#);
- border-color:desaturate(@red,%);
- }
- /*编译后的CSS*/
- #header{
- color:#;
- border-left:1px;
- border-right:2px;
- }
- #footer{
- color:#;
- border-color:#7d2717;
- }
二、Sass
- $blue : #1875e7;
- div {
- color : $blue;
- }
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
- $side : left;
- .rounded {
- border-#{$side}-radius: 5px;
- }
2. 计算功能
- body {
- margin: (14px/);
- top: 50px + 100px;
- right: $var * %;
- }
3. 嵌套
- div h1 {
- color : red;
- }
- //可以写成:
- div {
- hi {
- color:red;
- }
- }
属性也可以嵌套,比如border-color属性,可以写成:
- p {
- border: {
- color: red;
- }
- }
注意,border后面必须加上冒号。在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
- a {
- &:hover { color: #ffb3ff; }
- }
4. 注释
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
- /*!
- 重要注释!
- */
5. 继承
- //SASS允许一个选择器,继承另一个选择器。比如,现有class1:
- .class1 {
- border: 1px solid #ddd;
- }
- //class2要继承class1,就要使用@extend命令:
- .class2 {
- @extend .class1;
- font-size:%;
- }
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,调用这个mixin。
div {
@include left;
}
mixin的强大之处,在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候,根据需要加入参数:
div {
@include left(20px);
}
下面是一个mixin的实例,用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候,可以像下面这样调用:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.3 颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令,用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。
@import "foo.css";
五、高级用法
5.1 条件语句
@if可以用来判断:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令:
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
5.2 循环语句
SASS支持for循环:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
5.3 自定义函数
SASS允许用户编写自己的函数。
- @function double($n) {
- @return $n * ;
- }
- #sidebar {
- width: double(5px);
- }
三、两者区别
Less & Sass的更多相关文章
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- SASS教程sass超详细教程
SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...
- Sass之坑Compass编译报错
前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- Sass用法指南
写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...
- PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...
- Sass:初识Sass与Koala工具的使用
一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...
随机推荐
- 3dContactPointAnnotationTool开发日志(十八)
今天实现了tab效果,按tab键可以在status面板的各个输入框内来回切换,参考Unity3D - UGUI实现Tab键切换输入框.按钮(按Tab键切换高亮显示的UI)
- ipython matplotlib
matplotlib实际上是一套面向对象的绘图库,它所绘制的图表中的每个绘图元素,例如线条Line2D.文字Text.刻度等在内存中都有一个对象与之对应.为了方便快速绘图matplotlib通过pyp ...
- BER-TLV数据结构
本文是自身在研究学习过程中碰到的问题,整理而成. 为了便于后文的引用说明,先列出一段TLV结构的数据: [6F] 4D │ ├─[] A0000003330101 │ ├─[A5] │ │ ├─[] ...
- Spring MVC 之@Controller@RequestMapping详解
一:配置web.xml 1)问题:spring项目中有多个配置文件mvc.xml dao.xml 2)解决:在web.xml中 <init-param> <param-name& ...
- ASP.NET MVC4中使用bootstrip模态框时弹不出的问题
最近发现使用在MVC中使用bootstrip的模态框时弹不出来,但单独建立一HTML文件时可以弹出,说明代码没有问题,经过多次测试发现,在MVC的cshtml文件中添加上以下语句就能正常 @{ Lay ...
- 《转》'autocomplete="off"'在Chrome中不起作用解决方案
最近项目中遇到一个令人头疼的问题,查阅各种资料,尝试各种方法,最终得以解决:哎···下面就说说这心酸的历程吧. 大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值 ...
- 【题解】Atcoder ARC#83 E-Bichrome Tree
哈哈~自己做出来的E题!(虽然这题被机房大佬强D极水).最开始神经错乱,写了个完全不对的贪心,竟然只错了4个点(。•ˇ‸ˇ•。) 可以发现,一个节点的子树内部和他颜色相同的节点权值和 是固定的,那么不 ...
- [NOIP2012]疫情控制 贪心 二分
题面:[NOIP2012]疫情控制 题解: 大体思路很好想,但是有个细节很难想QAQ 首先要求最大时间最小,这种一般都是二分,于是我们二分一个时间,得到一个log. 然后发现一个军队,越往上走肯定可以 ...
- POJ3525:Most Distant Point from the Sea——题解
http://poj.org/problem?id=3525 题目大意:给一个逆时针序列的多边形点集,求其中可以画的最大半径的圆的半径. —————————————————————— 二分枚举半径长度 ...
- Codevs1169:传纸条——题解
题目描述 Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就 ...