一、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的更多相关文章

  1. Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件

    为sublime text 添加LESS语法高亮 功能:LESS高亮插件   下载   https://packagecontrol.io/packages/LESS 简介:用LESS的同学都知道,s ...

  2. Less、Sass和SCSS

    (一)区别: Less(可在客户端和服务端运行)是一种动态样式语言,对css赋予了动态语言的特性,如:变量.继承.运算.函数. SCSS为Sass的升级版本,兼容Sass功能,又新增功能.SCSS 需 ...

  3. scss、sass、less的对比与区别

    什么是Sass和Less? sass和less都属于CSS预处理器. css预处理定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,将CSS作为目标生成文件,然后开 ...

  4. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  5. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  6. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  7. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  8. 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

    2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...

  9. 20190422-外部导入CSS样式之link、CSS@import、Sass分音

    写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻 ...

随机推荐

  1. CUDA Samples: Dot Product

    以下CUDA sample是分别用C++和CUDA实现的两个非常大的向量实现点积操作,并对其中使用到的CUDA函数进行了解说,各个文件内容如下: common.hpp: #ifndef FBC_CUD ...

  2. 《Effective Java》读书笔记(二)之对于所有对象都通用的方法

    第八条 在改写equals的时候请遵守通用约定 一般以下几种情况,不适宜覆盖equals方法 1.类的每个实例本质上都是唯一的,对于代表活动实体而不是值的类确实如此,例如Thread. 2.不关心类是 ...

  3. mac下安装伪分布hadoop2.6.0和hbase1.0.1.1

    1.安装JDK,我安装的是java1.7 2.创建管理员账户 3.安装ssh服务(如果已有跳过此步) 4.ssh无密码验证登陆 以上过程略,可参考ubuntu下安装hadoop一文. 5.下载并解压h ...

  4. linux自学(六)之开始centos学习,更换yum源

    上一篇:linux自学(五)之开始centos学习,Xshell远程连接 1. 备份原来的yum源 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repo ...

  5. javascript进阶修炼之一——javascript必备操做

    动态选择方法及属性 使用方括号操作符,比点操作符功能更强大.因为可以在[ ]方括号中使用任何代表成员名称的内容访问对象.包括字面量,保存着成员名称的变量,名称组合,三元操作符.所有这些内容都会被处理成 ...

  6. 数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群)

    数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群) 因为不会做目录所以请善用ctrl+F 本来想的是笔记之类的,写着写着就变成了资源整理 一些有的 ...

  7. 转发 GSLB概要和实现原理

    What is GSLB Global Server Load Balancing 中文:全局负载均衡 SLB(Server load balancing)是对集群内物理主机的负载均衡,而GSLB是对 ...

  8. SpringBoot RestFul集成Swagger2

    一.依赖: <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...

  9. Oracle 12c RAC 日志体系结构的变化

    1    说明 在11g中,查看GRID的日志,会进入$ORACLE_HOM/log. [grid@cndba.cn ~]$ cd $ORACLE_HOME/log/ [grid@cndba.cn l ...

  10. gitlab安装、配置与阿里云产品集成

    https://www.ilanni.com/?p=12819 一.gitlab安装与部署 gitlab的安装可以分为源码安装和通过安装包进行安装,要是按照我以前的写作习惯的话,我也会把源码安装在本文 ...