作者:zccst
一. Sass/Scss&Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。
Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。less英文站需要外网,也可以访问中文站
Sass与Scss有什么差别
Sass原先跟Haml一样的缩排语法,对于写惯Css的前端来说是很不直观的,也不能将原来的Css加到Sass里面,因此Sass改良了语法,Sass 3就变成了Scss(Sassy CSS)。与原来的语法兼容,只是用{}取代了原来的缩进。
Sass
.content
margin:10px auto
h1
font-size:24px;
Scss
.content{
margin:10px auto
h1{
font-size:24px;
}
}
二. Sass/Scss&Less区别?
1.Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器,也可以在开发环节使用Less,然后编译成Css文件,直接放到项目中,也有 Less.app、SimpleLess、CodeKit.app这样的工具,也有在线编译地址。
2.变量符不一样,less是@,而Scss是$,而且变量的作用域也不一样,后面会讲到。
3.输出设置,Less没有输出设置,Sass提供4中输出选项:nested, compact, compressed 和 expanded。
4.Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。
/* Sample Sass "if" statement */
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
/* Sample Sass "for" loop */
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
三. Sass/Scss&Less的共同特征
1.变量
允许我们单独定义通用的样式,这样可以在css中调用。
Less 变量
@color:#4d926f;
#header{
color:@color;
}
h2{
color:@color;
}
Scss 变量
$color:#4d926f;
#header{
color:$color;
}
h2{
color:$color;
}
编译后的css
#header{color:#4d926f;}
h2{color:#4d926f;}
2.混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
Less 混合
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(11px);
}
Scss 混合
@mixin rounded-corners ($radius: 5px) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
#header {
@include rounded-corners;
}
#footer {
@include rounded-corners(11px);
}
编译后的css
#header{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#footer{
border-radius:11px;
-webkit-border-radius:11px;
-moz-border-radius:11px;
}
3.嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
Less 嵌套
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Scss 嵌套
#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;
}
3.函数&运算
运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。
Less 函数运算
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
Scss-函数运算
$the-border: 1px;
$base-color: #111;
$red: #842210;
#header {
color: $base-color * 3;
border-left: $the-border;
border-right: $the-border * 2;
}
#footer {
color: $base-color + #003300;
border-color: desaturate($red, 10%);
}
编译后的css
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
4.color函数
提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:
lighten(@color, 10%);
/* return a color which is 10% *lighter* than @color */
darken(@color, 10%);
/* return a color which is 10% *darker* than @color */
saturate(@color, 10%);
/* return a color 10% *more* saturated than @color */
desaturate(@color, 10%);
/* return a color 10% *less* saturated than @color */
fadein(@color, 10%);
/* return a color 10% *less* transparent than @color */
fadeout(@color, 10%);
/* return a color 10% *more* transparent than @color */
spin(@color, 10);
/* return a color with a 10 degree larger in hue than @color */
spin(@color, -10);
/* return a color with a 10 degree smaller hue than @color */
Scss同样也支持color函数,只需要将@改为$即可。
5.作用域
Less-作用域
@color: #00c; /* 蓝色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 红色边框 */
}
#footer {
border: 1px solid @color; /* 蓝色边框 */
}
Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}
scss-作用域
$color: #00c; /* 蓝色 */
#header {
$color: #c00; /* red */
border: 1px solid $color; /* 红色边框 */
}
#footer {
border: 1px solid $color; /* 蓝色边框 */
}
Less-作用域编译后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}
我们可以看出来,less和scss中的变量会随着作用域的变化而不一样,上面的例子能很好的解释这点。
6.Importing
文件引入
Less-import
@import "lib.less";
@import "lib";
在Scss中,也是可以import。
scss-import
//需要被 import 的文件必须以 _开头命名,如 _rounded.scss
@import "rounded";
四. Sass/Scss安装
Scss的安装需要Ruby环境
$ gem install sass
安装后就可以直接编译Sass了
$ sass --watch style.scss:style.css
还有一个利器就是大名顶顶的Compass,后面我会用一篇博文来介绍下。
五. Less安装使用
1.在客户端使用
引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
然后在Less官网下载 less.js, 在 中引入:
<script src="less.js" type="text/javascript"></script>
注意你的less样式文件一定要在引入less.js前先引入。
2.在服务端安装使用
* 安装
在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:
$ npm install less
如果你想下载最新稳定版本的 LESS,可以尝试像下面这样操作:
$ npm install less@latest
* 使用
在命令行下使用
你可以在终端调用 LESS 解析器:
$ lessc styles.less
上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:
$ lessc styles.less > styles.css
如何你想将编译后的 CSS 压缩掉,那么加一个 -x 参数就可以了.
还有些编译工具上面也有讲过,那些更加的方便。
参考资料
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
http://www.lesscss.org
http://www.lesscss.net
http://sass-lang.com
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
Sass和SCSS的关系2. Sass简介3. 在项目中编译Sass4. Sass/SCSS、Less还是stylus?二、Sass(基于SCSS语法)详解1. CSS功能拓展(1). 嵌套规则(2). 父选择器&(3). 属性嵌套(4). 占位选择器%foo(5). 注释2. SassScript...
SASS和SCSS的区别在于语法。SASS是一种缩进语法,而SCSS使用类似CSS的块状语法,与CSS更为相似。 ### 安装SASS/SCSS 在Windows平台下安装SASS和SCSS,首先需要安装Ruby语言环境,因为SASS是用Ruby语言开发的。安装...
总的来说,InspiniaAdmin 2.6.1提供的PDF文档、LESS、SASS和SCSS以及PSD设计文件,为开发者提供了一整套完善的开发工具链,无论你是新手还是经验丰富的开发者,都能从中受益,快速构建出专业且富有美感的后台管理...
标题"less_scss_lesssass_"表明我们将探讨这两个工具的核心概念和使用方法。 LESS(层叠样式表扩展)是克里斯·艾普顿(Alexis Sellier)于2009年创建的一种动态样式语言,它引入了变量、嵌套规则、运算符、函数等...
Vue 项目中如何引入全局 Sass/Less 变量、函数、Mixin 在 Vue 项目中,如何引入全局 Sass/Less 变量、函数、Mixin 是一个常见的问题。今天,我们将详细介绍如何使用 sass-resources-loader 将全局 Sass/Less 变量、...
ast 这是将CSS,Sass和SCSS解析为与兼容的抽象语法树(AST)的事情,这使得随后可以使用所有出色的进行搜索和操作。 大部分繁重的工作都是由完成的。安装用npm安装它: npm install --save sast用法您可以import或...
Sass 和 Scss 几乎是一样的,现在似乎经常使用更像 CSS 的 Scss。 似乎Less和Scss经常被拿来比较,但Scss的用途更广。但是,从文化上讲,Scss 来自 Ruby,Less 来自 Node,Less 更简单,似乎可以在前端处理,无需在...
vim-sass-colors 这是一个vim插件,用于突出显示sass / scss / less / css颜色和颜色变量。 它适用于进口!安装通过安装cd ~ /.vim/bundlegit clone https://github.com/shmargum/vim-sass-colors.git 通过安装...
启用Gridsome SASS-SCSS的Vue JS Wordpress启动器 Sass / Scss版本在gridsome.config.js文件中为sass / scss启用。使用1个CSS文件。安装和安装首先安装Gridsome,然后克隆存储库并运行yarn。 可以自己换出导航,页眉...
【Sass 和 Less CSS预处理器】是前端开发中两种非常重要的工具,它们为CSS扩展了强大的功能,使得CSS编写更加高效、易于维护。Sass诞生于2007年,是最老牌的CSS预处理器,拥有两种语法:一种是基于缩进的Sass格式,...
grunt-scss-less-stylus-css Grunt 任务将 LESS 转换为 SCSS、CSS 和 Stylus,将 SCSS 转换为 LESS、Stylus 和 CSS,并将 Stylus 转换为 SCSS、LESS 和 CSS ##安装 $ npm install --save-dev grunt-scss-less-...
Less2Scss 是一个简单的 PHP 应用程序,可帮助您将 less 转换为 sass。 请记住,它并不总是正确的,因此需要一些手动更正。 我会不断改进程序并尝试发现更多变化。 使用 Yeoman 和构建 运行应用 Less2Scss有两种...
前往Gitterchat: ##限制对路径使用单引号,对字体系列/ CSS内容使用双引号不支持BASE64编码的图像##特征支持SASS / SCSS / LESS文件支持所有与颜色相关的函数,rgba()和哈希可配置的色板尺寸代码提示黑暗与...
安装使用 Bower 安装: $ bower install --save sass-less-stylus.easing使用 npm 安装: $ npm install --save sass-less-stylus.easing缓动变量可用于Sass / Scss / Stylus或Less 的缓动变量。缓入$ease-in-quad或...
Less和SCSS都是CSS预处理器,它们扩展了CSS的功能,允许开发者使用变量、嵌套规则、函数等特性来编写更易维护和扩展的样式代码。这个工具可能是基于JavaScript开发的,旨在帮助开发者在项目中无缝切换或整合这两种预...
Angular 2 dependency graph、Angular Essentials,Bueatify CSS/SASS/SCSS/LESS、Bookmarks、C#、C# XML Documentation Comments、Can I Use、Do i use、Code Outline、Code Runner、Code Metrics、Document This、...
由于原始CSS语言本身并不支持这些特性,预处理器如Sass和Less就显得尤为重要。它们将开发者使用的特殊语法编译成标准的CSS,从而解决了CSS代码组织和浏览器兼容性问题。 【Sass和Less对比】 1. **语法差异** - ...
为Sass(SCSS)和LESS CSS构建了流畅,响应和语义的网格。 它支持任意数量的列。 装订线宽度定义为百分比(显示为左边界),网格也可以嵌套。 对可重用,快速和灵活的网格系统的要求 我认为CSS网格系统应满足以下...
小程序打字稿最佳实践演示小程序Typescript最佳实践DEMO使用 gulp 构建(支持 typescript 和 less/sass/scss)使用 typescript 编译使用 tslint + prettier 格式代码规范使用小程序官方打字库使用小程序weui组件库...