less和sass的区别
首先sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用。sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm,sass是基于ruby所以在服务器处理。
LESS详细,首先扩展文件名的格式是 xxx.less,<script src="less.js"...> 这种方式编译less,但在实际项目中 还是用命令行的 lessc xxx.less>xxx.css 方式然后引入编译后的css文件 这样减少在运行时上面出现的问题。
1.//安装less
npm install -g less
2.变量
@变量名:值
@width:100px;
.box{
width:@width;
}
3.混合
定义classa 然后可以将classa引入到classb中
.classa(a){
width:@width;
}
.classb{
.classa(a);
}
4.嵌套规则
父级{
子集
}
5.函数和运算
可以将值计算
@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%);
}
6.SASS详细
首件扩展文件名的格式是 xxx.scss 或者是 xxx.sass
使用方法: sass xxx.scss xxx.css
编译风格:
nested:嵌套缩进的css代码,默认
expanded:没有缩紧的,扩展的css代码
campact:简介格式的css代码
compressed:压缩后的css代码(生产环境)
监听目录
sass --watch xxx.scss:xxx.css //监听文件
sass --watch scsspath:csspath //监听文件夹
变量
$变量名:值
$width:100px;
.box{
width:$width;
}
如果变量包含字符串则写在 #{}之中
$c:color;
.box{
border-#{$c}:red;
}
嵌套计算
less和sass嵌套相同,计算同理
继承
同less混合相同 定义classa 然后再classb可饮用classa值
//使用方法 定义classa
.classb{
@extend .classa
}
Mixin
//使用方法先用@mixin命令定义一个代码块
@mixin left(参数1,参数2){
float:left;
margin-left:10px;
}
//使用@include调用刚刚定义的代码块
.box{
@inclidu left(参数1,参数2);
}
颜色函数 lighten(颜色,百分比)
插入文件
@import命令插入外部文件 .scss和css都可
条件语句
//@if 可以用来判断 @else 则是配套
.box{
@if 1+1>1 {width:100px;}@else {
width:200px;
}
}
循环语句
//@for @while @each
@for $i from 1 to 10{
border-#{$i}{
border:#{$i}px solid red;
}
}
//@while
$i:6;
@while $i>0{
.item-#{$i}{
width:2em*$i;
}
$i:$i-2;
}
//@each
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
自定义函数
@function name($n){
@return $n*2;
}
.box{
width:name(value);
}
总结
两者都有其优缺点,如果你开发环境中并没有ruby 并且你不想安装ruby 你就可以使用less,如果你觉得sass的语法你更倾向并且你安装了ruby 你就可以使用sass。总之工具不重要,码出一手好代码才是真理。
less和sass的区别的更多相关文章
- 【less和sass的区别,你了解多少?】
在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...
- less与sass的区别
在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...
- IasS,CasS,PasS,SasS的区别
IasS: (Infrastructure-as-a-Service(基础设施即服务)) 租用的是硬件,服务器,物理机等 CasS: (container as a Service) 容器服务 租用的 ...
- 关于sass的介绍和基本语法
引入 什么是sass?sass是css预处理器. 那预处理器又是什么?css本身不是一种编程语言,而预处理器是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件. 如今主流的预处理器 ...
- sass 基础——回顾
1.webstorm 自动编译SASS 下载安装包 http://rubyinstaller.org/downloads/ 然后点击安装,路径为默认路径就行, 勾选以下两项 add Ruby exec ...
- Less、Sass/Scss
一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数. Less 既可以在客户端上运行 (支持IE 6+, Webki ...
- Bootstrap定制(一)less入门及编译
第一篇博,希望支持. 近期在开发一个项目,项目前端定位于bootstrap,遂花了少许时间研究了bootstrap,将其整理整理,与众人共享. bootstrap官方的定制,功能还算完善,但是基于we ...
- css的扩展技术
CSS的扩展技术 (在原来的CSS语言的基础上扩展了js,可以在里面写js ) 一.less 定义: @color:red; //定义颜色 @body-color:blue; @div-color:y ...
- CSS预处理语言
CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...
随机推荐
- Struts2 2.5版本的通配符和动态方法调用的问题
Struts2.5版本之后,使用通配符的时候出现错误 配置的四个action,使用通配符和动态方法的时候找不到其中的update方法后来经过查找才知道原来是版本加了一个 <action name ...
- jquery学习-document.ready和document.onload区别
$(function(){}) 和$(document).ready(function(){}的作用一样,表示在document树加载完之后执行一个函数. $(document).onload(fun ...
- linux自动备份lampp的日志
要求是:每天23:59自动备份lampp的日志/opt/lampp/logs/access_log 放到这个目录下/tmp/bak 命名格式:access_log.日期 1.新建shell脚本#vi ...
- django模型二
django模型二 常用模型字段类型 IntegerField → int CharField → varchar TextField → longtext DateFiel ...
- 《DSP using MATLAB》Problem 7.23
%% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output Info a ...
- JavaScript线程(第八天)
js是单线程的: js中的线程分为三种 1.页面渲染 2.主代码逻辑 3.事件触发: 下面我们来看一段代码 <script> setTimeout(function(){ conso ...
- 改变一下主要发博的方向吧...转scratch!
因为expression2实在是没什么好说的,BUI,水滴鱼大佬还有其他贴吧上的大佬,实在是多得不行,我一个小人物也说不了什么,然而scratch我却可以多发发脚本,思路,美工啊等等.所以以后我就主要 ...
- Linux df -h空间显示不正确
今天发现一个测试数据库磁盘空间快满了,准备将几个不再用的表空间删除.通过以下命令删除表空间内容及数据文件. drop tablespace tablespace_name including cont ...
- rust debug之基于pdb
方法一: 用visual studio 步骤: 安装msvc工具链 rustup toolchain install stable-x86_64-pc-windows-msvc 切换到该工具链 rus ...
- GetPJData - uGetHttpData.pas
function GetPJData(APage: Integer): string; var IdHTTP: TIdHTTP; url: string; paramsList: TStringLis ...