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文件夹拽进来,可以修改一下输 ...
随机推荐
- phpcms开启在线编辑模版 方法
目录:\caches\configs\system.php 将:第20行 'tpl_edit'=> 0 修改为 'tpl_edit'=> 1 (0:默认的,不开启: 1: ...
- vue-cli3配置postcss-cssnext
1. // npm install autoprefixer --save-dev 此步不需要了,因为postcss-cssnext自带这个依赖 npm install postcss-cssnext ...
- 【bzoj1712】[Usaco2007 China]Summing Sums 加密 矩阵乘法
题目描述 那N只可爱的奶牛刚刚学习了有关密码的许多算法,终于,她们创造出了属于奶牛的加密方法.由于她们并不是经验十足,她们的加密方法非常简单:第i只奶牛掌握着密码的第i个数字,起始的时候是Ci(0≤C ...
- Python 开篇及第一个Python程序
本节内容 python 简单介绍 python 2.x 或者python 3.x python 安装 第一个python程序 一.python简单介绍 python的创始人为吉多.范罗苏姆(Guido ...
- python字典的常用操作
# dic={[1,2,3]:'123'} #可变类型不能当做字典的key,value可以使用任意类型 # dic={(2,3,4):'123'} # print (dic[(2,3,4)]) #元组 ...
- [洛谷P3261][JLOI2015]城池攻占
题目大意:有$n$个点的树,第$i$个节点有一个权值$h_i$,$m$个骑士,第$i$个骑士攻击力为$v_i$,一个骑士可以把从它开始的连续的父亲中比它小的节点攻破,攻破一个节点可以把攻击力加或乘一个 ...
- bzoj1588 [HNOI2002]营业额统计 (treap)
平衡树裸题 只需要求前驱后驱 treap写法 const mm=<<; maxnumber=; maxn=; var left,right,fix,key:..maxn]of longin ...
- POJ3335:Rotating Scoreboard——题解
http://poj.org/problem?id=3335 题目大意:给按照顺时针序的多边形顶点,问其是否有内核. —————————————————————————————— 看了两个小时的资料, ...
- bzoj3224: Tyvj 1728 普通平衡树(打个splay暖暖手)
(其实今天好热啊? 题目大意:插入,删除,k小,前驱后继,数的排名. splay和treap裸题...过几天补个treap的 splay: #include<iostream> #incl ...
- [学习笔记]分治FFT
一般的分治FFT是指: https://www.luogu.org/problemnew/show/P4721 考虑后面的f和前面的f有关系,但是贡献可以分着计算,逐一累计上去. 考虑cdq分治.算出 ...