Less、Sass/Scss
一、Less、Sass/Scss是什么?
1、Less:
是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。
2、Sass:
是一种动态样式语言,Sass语法属于缩排语法,
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。
Sass与Scss是什么关系?
Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。
二、less和sass的相同之处
Less和Sass在语法上有些共性,比如下面这些:
1、混入(Mixins)——class中的class;
2、参数混入——可以传递参数的class,就像函数一样;
3、嵌套规则——Class中嵌套class,从而减少重复的代码;
4、运算——CSS中用上数学;
5、颜色功能——可以编辑颜色;
6、名字空间(namespace)——分组样式,从而可以被调用;
7、作用域——局部修改样式;
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
三、less和sass的区别
Less和Sass的主要不同就是他们的实现方式。
Less是基于JavaScript,是在客户端处理的。
Sass是基于Ruby的,是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$。
1、Less:
【两种注释方式】
①//less中的注释,但这种不会被编译
②
/*
* 这也是less中的注释,但是会被编译
*/
【less中的变量】
1、声明变量:@变量名:变量值;
使用变量: @变量名
>>>less中变量的类型:
①数字类 1 10px
②字符串:无引号字符串 red ;有引号字符串 "haha"
③颜色类:red #000000 rgb()
④值列表类型:用逗号和空格分隔 10px solid red
eg:

1 @length: 100px;
2 @color:red;
3 @opa:0.5;
4 @border:10px solid red;
5 .borderRadius(@brWidth:10px){
6 border-radius: @brWidth;
7 }
8 .setMargin(lefts,@width){
9 margin-left:@width;
10 }

>>>变量使用原则:
多次频繁出现的值、需要修改的值,设为变量
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中的运算
+ - * / 可带、可不带单位
颜色运算时,红绿蓝分三组计算,组内可进位,组间互不干涉
5、包含了传进来的所有参数:border:@arguments;
6、less中的嵌套:保留HTML中的代码结构
①嵌套默认是后代选择器,如果需要子代选择器,则在子代前加>
②.&表示上一层 &:表示上一层的hover事件
eg:

1 section{
2 p{
3 color: red;
4 background-color: yellowgreen;
5 text-align: center;
6 }
7 ul{
8 padding: 0px;
9 list-style: none;
10 li{
11 float: left;
12 margin: 10px;
13 width: 100px;
14 text-align: center;
15 border: @border;
16 &:hover{
17 background-color: yellow;
18 }
19 }

2、Sass:
1、Sass中的变量
使用 $变量名:变量值,声明变量;
如果变量需要在字符串中嵌套,则需使用#加大括号包裹;
border-#{$left}:10px solid blue;
2、Sass中的运算,会将单位也进行运算,使用时需注意最终单位
例: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($param:value){}
调用:@include name(value);
>>>声明时,可以有参,可以无参;可带默认值,也可不带;但是,调用时,必须符合声明规范。同less
>>>优点;可以传参,不会生成同名class;
>>>缺点:会将混合宏中的代码,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);
10、使用...将传进来的所有参数,接收到一个变量中
@mixin bordeRadius($param1...){
//使用...将传进来的所有参数,接收到一个变量中
border-radius:$param1;
-webkit-border-radius:$param1;
}
Less、Sass/Scss的更多相关文章
- Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件
为sublime text 添加LESS语法高亮 功能:LESS高亮插件 下载 https://packagecontrol.io/packages/LESS 简介:用LESS的同学都知道,s ...
- Less、Sass和SCSS
(一)区别: Less(可在客户端和服务端运行)是一种动态样式语言,对css赋予了动态语言的特性,如:变量.继承.运算.函数. SCSS为Sass的升级版本,兼容Sass功能,又新增功能.SCSS 需 ...
- scss、sass、less的对比与区别
什么是Sass和Less? sass和less都属于CSS预处理器. css预处理定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,将CSS作为目标生成文件,然后开 ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...
- 20190422-外部导入CSS样式之link、CSS@import、Sass分音
写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻 ...
随机推荐
- CUDA Samples: Dot Product
以下CUDA sample是分别用C++和CUDA实现的两个非常大的向量实现点积操作,并对其中使用到的CUDA函数进行了解说,各个文件内容如下: common.hpp: #ifndef FBC_CUD ...
- 《Effective Java》读书笔记(二)之对于所有对象都通用的方法
第八条 在改写equals的时候请遵守通用约定 一般以下几种情况,不适宜覆盖equals方法 1.类的每个实例本质上都是唯一的,对于代表活动实体而不是值的类确实如此,例如Thread. 2.不关心类是 ...
- mac下安装伪分布hadoop2.6.0和hbase1.0.1.1
1.安装JDK,我安装的是java1.7 2.创建管理员账户 3.安装ssh服务(如果已有跳过此步) 4.ssh无密码验证登陆 以上过程略,可参考ubuntu下安装hadoop一文. 5.下载并解压h ...
- linux自学(六)之开始centos学习,更换yum源
上一篇:linux自学(五)之开始centos学习,Xshell远程连接 1. 备份原来的yum源 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repo ...
- javascript进阶修炼之一——javascript必备操做
动态选择方法及属性 使用方括号操作符,比点操作符功能更强大.因为可以在[ ]方括号中使用任何代表成员名称的内容访问对象.包括字面量,保存着成员名称的变量,名称组合,三元操作符.所有这些内容都会被处理成 ...
- 数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群)
数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群) 因为不会做目录所以请善用ctrl+F 本来想的是笔记之类的,写着写着就变成了资源整理 一些有的 ...
- 转发 GSLB概要和实现原理
What is GSLB Global Server Load Balancing 中文:全局负载均衡 SLB(Server load balancing)是对集群内物理主机的负载均衡,而GSLB是对 ...
- SpringBoot RestFul集成Swagger2
一.依赖: <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...
- Oracle 12c RAC 日志体系结构的变化
1 说明 在11g中,查看GRID的日志,会进入$ORACLE_HOM/log. [grid@cndba.cn ~]$ cd $ORACLE_HOME/log/ [grid@cndba.cn l ...
- gitlab安装、配置与阿里云产品集成
https://www.ilanni.com/?p=12819 一.gitlab安装与部署 gitlab的安装可以分为源码安装和通过安装包进行安装,要是按照我以前的写作习惯的话,我也会把源码安装在本文 ...