sass 学习总结_HTML/CSS_第七城市
sass 学习总结
问题：1、为什么要引入SASS? 2、怎么利用SASS编写CSS？关键的管理理念是什么？ 3、如何搭建？ 4、SASS基本语法 5、一般CSS文件都应该有哪些公共资源？1、为什么要引入SASS?思考这个问题之前可以回忆一下过去写CSS样式的场景，首先估计每个前端开发人员都会自己存一套完整的CSS文件，里面包含所有基本样式，如H12345的定义、行高等等所有html标准标签的样式定义，每到一个新项目就直接copy一份，然后基于这一份进行各种修改，最终成为新项目的样式文件。这套完整的CSS文件可以是一个有修养的前端自己积累，页可以直接用别人写好的，譬如Bootstrap的css文件就是一个非常好的选择，而且它本身也使用SASS进行在线编译，可以安心使用。利用Bootstrap再加上自己的个性化定义，就基本可以满足所有项目了，当然也不要纠结于Bootstrap对移动设备所做的努力，如果不要这些样式，大可不管它们。 这里就提到SASS的在线编译，也回答了为什么要引入SASS。Bootstrap的样式是靠SASS进行管理的，类似SASS的这类功能的东西也叫做“CSS 预处理器”，同是CSS预处理器的还有LESS 和 Stylus等，基本都具有：规则、变量、混入、选择器、继承等等特性，也内部做了浏览器适配的编译能力，只要你按CSS/CSS3的标准规则编写样式，CSS预处理器就会把浏览器适配的样式给加上。没有预处理器的情况下，写CSS样式的过程会是各种复制粘贴的过程，样式文件大了之后往往都有牵一发而动全身的苦恼，遇到国难、假期等场景，需要修改N个地方，而且还担心遗漏。CSS 预处理器的变量、if、while、继承能设计思路就把这些工作给简化，释放了好多劳动力。 所以，其实不是要引入SASS，而是你要引入一个“CSS 预处理器”，让前端工作更轻松。2、怎么利用SASS编写CSS？关键的管理思路是什么？“CSS 预处理器”是一种工具，工具的产生都是为了减少重复劳动、降低成本的，但是说不好听的，是为了降低普通前端开发人员的工资而制造出来的工具，所以就业危机要常有，别以为有技术就有活干，工具很快就让你的老板意识到不需要你的存在。 怎么利用SASS编写CSS，并不是要看SASS的具体语法，而是要看自己对CSS的管理思维，除了CSS的基本知识以外，有了这套工具之后得有这些思路：
1、每遇到一个重复代码就抽取为公共代码，处理成@mixin。
2、同系颜色、字体大小等明显数组形式的取值可使用数组来管理。
3、分清元素的样式和布局的样式，先定义元素，再定义布局。
4、非子父关系的元素不要滥用继承。3、如何搭建？详情可参考：/sassguide/install.html 下载Ruby运行环境，下载ruby。 在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby。
然后输入命令： gem install sass 不过因为国内墙的原因，基本都是安装失败的。可以使用淘宝的RubyGems镜像安装。命令如下：gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l
// 这是为了确认下修改是否成功gem install sass
// 安装4、SASS基本语法细节可以参考：/sassguide/syntax.html 下面是根据个人经验做的备注 1、文件后缀名和编码格式
sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。比较推荐用SCSS的格式，因为跟css文件靠近，比较高阅读性，新手也看得比较明白。 2、导入@import 'reset.css' //效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中@import "_fileName.scss"; // 或者直接@import "fileName";规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。3、注释/**/
标准CSS注释//
双斜杆单行注释4、变量 sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。但是默认值这个概念个人觉得可以忽略，帮助不大，也没什么使用场景。 5、特殊变量 一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性明或在某些特殊情况下等则必须要以#{$variables}形式使用。PS：这个设计有点扯淡，不如直接采用一致的变量解释方式，这个CSS预处理器的语法规则设计有不友善的地方。反正记住就可以，简单属性值可以放心使用，复杂属性值就需要特殊处理就可以。//应用于class和属性.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #}5、多值变量 多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。多值变量是个很好的东西，在页面上很多地方都需要使用到，譬如定义h12345的字体大小，颜色的渐变等等，有了这种中变量就不需要重复这么多变量值，默写这么多单词，有时候想变量名都得想半天。 list数据可通过空格，逗号或小括号分隔多个值，可用nth(var,index)取值。更多函数可以访问 sass Functions//一维数据$px: 5px 10px 20px 30//二维数据，相当于js中的二维数组$px: 5px 10px, 20px 30$px: (5px 10px) (20px 30px);$linkColor:
#08c #333 !//第一个值为默认值，第二个鼠标滑过值a{
color:nth($linkColor,1);
color:nth($linkColor,2);
}}map数据以key和value成对出现，其中value又可以是list。格式为：map:(key1:value1,key2:value2,key3:value3);。可通过map-get(map,$key)取值。更多Map的相关函数可以访问sass Functions$heading: (h1: 2em, h2: 1.5em, h3: 1.2em); // 定义// 使用@each $header, $size in $headings {
#{$header} {
font-size: $size;
}}执行结果：（这个语句估计每一分完成的网站CSS文件都必须的。）h1 {
font-size: 2 }h2 {
font-size: 1.5 }h3 {
font-size: 1.2 }6、嵌套(Nesting) sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。不建议使用属性嵌套，因为它割裂了属性值的名称，而且一般属性名到了这么细的一项，属性值一般也只有一个值，嵌套带来不了多少益处，但增加了别人的阅读压力。 所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器，从而增强了sass文件的结构性和可读性。在选择器嵌套中，可以使用&表示父元素选择器。
如下：// scss文件#top_nav{
line-height: 40
text-transform:
background-color:#333;
float:left;
padding: 0 10
color: #fff;
color:#ddd;
}}// 生成的css#top_nav{
line-height: 40
text-transform:
background-color:#333;}
#top_nav li{
float:left;}#top_nav a{
padding: 0 10
color: #fff;}#top_nav a:hover{
color:#ddd;}重点：虽然有这样的功能，但不是主张没遇到一个模块就要用这种嵌套来实现。要回顾一下过去手工编写CSS的年代，怎么对元素进行定义，怎么对元素进行布局。开始布局一个模块时，找找里面有哪些基本元素，譬如按钮、输入框、标签、下拉框，这些基本元素是整个网站都需要使用的，应该抽取出来，然后根据需求定义它的样式、内部字体、padding、margin这些，但是不要考虑它的布局，因为在不同模块它都会有不同的布局的，应该在给模块写样式的时候再处理它的布局。这样就可以控制好整个页面粒度和架构。所以工具对工作起便利作用，但是页面的组织思维是你自己总结的，工具帮不了你。 7、@at-root 、 @at-root (without: …) 、 @at-root (with: …) 这三个概念不要去理解它，因为没什么用，就像编程语言里面的go to语句，让代码块跳来跳去，最后是苦了程序员自己，还不如不用的。 8、混合(mixin) 重点内容！sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。这个是必须得掌握的概念，应该到处都需要用到，是减少重复代码的主要途径。// 无参数mixin@mixin center-block {
margin-left:
margin-right:}.demo{
@include center-block;
// 直接混合，适用于一些全局样式}// 有参数mixin@mixin opacity($opacity:50) {
// 定义了变量名和默认值
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);}.opacity{
@include opacity; //参数使用默认值}.opacity-80{
@include opacity(80); //传递参数}// 多个参数mixin调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。所以还是蛮强大的。@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$
padding-top:$
padding-bottom:$
}.imgtext-h li{
@include horizontal-line(1px solid #ccc);}.imgtext-h--product li{
@include horizontal-line($padding:15px);}//多组值参数mixin//box-shadow可以有多组值，所以在变量参数后面添加...@mixin box-shadow($shadow...) {
-webkit-box-shadow:$
box-shadow:$}.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));}@content关键字@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。但是实验来看作用并不是很大，用了这个标签的话，跟重新定义一次样式就没什么差别了，所以这个关键字先记住，但是不用了解得太深。@mixin max-screen($res){
@media only screen and ( max-width: $res )
}}@include max-screen(480px) {
body { color: red }}//css style//-------------------------------@media only screen and (max-width: 480px) {
body { color: red }}
9、继承 sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。h1{
border: 4px solid #ff9aa9;}.speaker{
@extend h1;
border-width: 2}// 生成结果h1,.speaker{
border: 4px solid #ff9aa9;}.speaker{
border-width: 2}@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而@extend的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用@extend继承。不过非子父关系的元素不要滥用继承，不是为了压缩文件而继承，而是面向对象概念里面，有子父关系的才使用继承，滥用继承的恶果就是别人修改了不关联父类元素的样式后影响了其他本来不是孩子的子类。 譬如父菜单、子菜单这种样式就可以考虑继承，不然还是复制一份样式比较划算，况且4G都出来了，谁还担心那么点流量和网速啊。10、占位选择器% 从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。这个果然很给力。
eg://sass style//-------------------------------%ir{
text-shadow:
background-color:
border: 0;}%clearfix{
@if $lte7 {
content: "";
}}#header{
@extend %}//css style//-------------------------------#header h1,.ir{
text-shadow:
background-color:
border: 0;}#header h1{
width:300}11、函数 sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten(color,amount)和darken(color,amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
学习其他语言的经验在这里就可以复用了，关键的不是用过所有，而是知道有哪些，用的时候再细看，看官网。
RGB Functions // 跟颜色有关的函数
HSL Functions // 色相(H)、饱和度(S)、明度(L)三个颜色通道的函数
RGB是一种色彩模式，其中R代表红色，G代表绿色，B代表蓝色，通过调整三种颜色的值可以配出你想要的任何色彩。hsl则是另外一种色彩模式：h代表色相，s代表饱和度，l代表明度，通过改变他们的比值也可以配出各种你想要的色彩效果。没什么特别复杂的地方，就是方便给出颜色而已。
Opacity Functions // 获取具有透明度的颜色
String Functions // 字符串处理
Number Functions // 数字函数
List Functions // 数组函数
Map Functions // 映射表函数
Selector Functions // 选择器函数，感觉比较没用
Introspection Functions // sass专用函数12、条件判断 @if判断 @if可一个条件单独使用，也可以和@else结合多条件使用$lte7:$type:.ib{
display:inline-
@if $lte7 {
@if $type == ocean {
} @else if $type == matador {
} @else if $type == monster {
}}生成的css.ib{
display:inline-
*zoom:1;}p {
color: }13、三目判断 语法为：if(condition,if_true, iffalse)。三个参数分别表示：条件，条件为真的值，条件为假的值。14、for循环for循环有两种形式，分别为：@forvar from &start& through &end&和@for varfromto。i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。个人觉得只用to这种就ok，比较符合多数编程语言的习惯//sass style//-------------------------------@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }}//css style//-------------------------------.item-1 {
width: 2 }.item-2 {
width: 4 }15、@each循环 语法为：@each varin&listormap&。其中var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。这个也属于常用语法之一。// 单个字段list数据循环$animal-list: puma, sea-slug, egret,@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}}// 生成结果.puma-icon {
background-image: url('/images/puma.png'); }.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }.egret-icon {
background-image: url('/images/egret.png'); }.salamander-icon {
background-image: url('/images/salamander.png'); }// 多个字段list数据循环$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $
}}// 生成结果：.puma-icon {
background-image: url('/images/puma.png');
cursor: }.sea-slug-icon {
background-image: url('/images/sea-slug.png');
cursor: }.egret-icon {
background-image: url('/images/egret.png');
cursor: }// 多个字段map数据循环$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {
#{$header} {
font-size: $
}}// 生成的结果h1 {
font-size: 2 }h2 {
font-size: 1.5 }h3 {
font-size: 1.2 }
&span&标签挨着写时的出现的
最新教程周点击榜
微信扫一扫初步认识 LESS,我要开始学习LESS啦！ - 王朝网络 -
分享&&&&&当前位置: &&&&&&&&初步认识 LESS,我要开始学习LESS啦！&&&　　初步认识 LESS,我要开始学习LESS啦！LESS 是一个流行的样式表语言，它提供了 CSS3 也未曾实现的多种功能，让您编写 CSS 更加方便，更加直观。LESS 已经被广泛使用在多种框架中 ( 例如：BootStrap)。本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化，及其典型的应用场景，并将其与其他样式表语言进行比较。相信前端开发工程师会喜欢 LESS，灵活运用 LESS 以提高开发效率。　　LESS 背景介绍LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码，在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了（例如 Twitter 提供的 bootstrap 库就使用了 LESS）。那么，LESS 是从何而来呢？它和 SASS 等样式表语言又有何区别呢？　　图 1.LESS 的官网介绍　　根 据维基百科上的介绍，其实 LESS 是 Alexis Sellier 受 SASS 的影响创建的开源项目。当时 SASS 采用了缩进作为分隔符来区分代码块，而不是 CSS 中广为使用的括号。为了让 CSS 现有用户使用起来更为方便，Alexis 开发了 LESS 并提供了类似的功能。在一开始，LESS 的解释器也同样是由 Ruby 编写，后来才转而采用了 javaScript. LESS 代码既可以运行在客户端，也可以运行在服务器端。在客户端只要把 LESS 代码和相应的 Javascript 解释器在同一页面引用即可；而在服务器端，LESS 可以运行在 Node.js 上，也可以运行在 Rhino 这样的 JavaScript 引擎上。　　说一点题外话，其实现在的 SASS 已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和 CSS 一样采用了大括弧作为风格符。后一种语法规则又名 SCSS，在 SASS 3 之后的版本都支持这种语法规则。SCSS 和 LESS 已经越来越像了，它俩之间更详细的对比可以参考此链接。　　LESS 高级特性我 们知道 LESS 拥有四大特性：变量、混入、嵌套、函数。这些特性在其他文章中已经有所介绍，这里就不复述了。其实，LESS 还拥有一些很有趣的特性有助于我们的开发，例如模式匹配、条件表达式、命名空间和作用域，以及 JavaScript 赋值等等。让我们来逐一看看这些特性吧。　　模式匹配：相信大家对 LESS 四大特性中的混入 (mixin) 依然印象深刻吧，您用它能够定义一堆属性，然后轻松的在多个样式集中重用。甚至在定义混入时加入参数使得这些属性根据调用的参数不同而生成不同的属性。那 么，让我们更进一步，来了解一下 LESS 对混入的更高级支持：模式匹配和条件表达式。　　首先，让我们来回顾一下普通的带参数的混入方式：　　清单 1. 带参数（及参数缺省值）的混入　　Html代码.border-radius(@radius:3px){border-radius:@-moz-border-radius:@-webkit-border-radius:@}.button{.border-radius(6px);}.button2{.border-radius();}　　清单 2. 混入生成的 CSS 代码　　Html代码.button{border-radius:6-moz-border-radius:6-webkit-border-radius:6}.button2{border-radius:3-moz-border-radius:3-webkit-border-radius:3}　　从上面这个例子可以看出，在混入我们可以定义参数，同时也可以为这个参数指定一个缺省值。这样我们在调用这个混入时如果指定了参数.border-radius(6px)，LESS 就会用6px来替换，如果不指定参数来调用.border-radius()，LESS 就会用缺省的3px来替换。现在，我们更近一步，不仅仅通过参数值来更改最终结果，而是通过传入不同的参数个数来匹配不同的混入。　　清单 3. 利用不同的参数个数来匹配不同的混入　　Html代码.mixin(@a){color:@a;width:10}.mixin(@a,@b){color:fade(@a,@b);}.header{.mixin(red);}.footer{.mixin(blue,50%);}　　清单 4. 不同参数个数调用后生成的 CSS 代码　　Html代码.header{color:#ff0000;width:10}.footer{color:rgba(0,0,255,0.5);}　　这个例子有些像 Java 语言中的方法调用有些类似，LESS 可以根据调用参数的个数来选择正确的混入来带入。现在，我们了解到通过传入参数的值，以及传入不同的参数个数能够选择不同的混入及改变它的最终代码。这两 个例子的模式匹配都是非常容易理解的，让我们换个思路，上面的例子中参数都是由变量构成的，其实在 LESS 中定义参数是可以用常量的！模式匹配时匹配的方式也会发生相应的变化，让我们看个实例。　　清单 5. 用常量参数来控制混入的模式匹配　　Html代码.mixin(dark,@color){color:darken(@color,10%);}.mixin(light,@color){color:lighten(@color,10%);}.mixin(@zzz,@color){display:weight:@}.header{.mixin(dark,red);}.footer{.mixin(light,blue);}.body{.mixin(none,blue);}　　清单 6. 常量参数生成的 CSS 代码　　Html代码.header{color:#cc0000;display:weight:}.footer{color:#3333display:weight:}.body{display:weight:}　　通过这个例子我们可以看出，当我们定义的是变量参数时，因为 LESS 中对变量并没有类型的概念，所以它只会根据参数的个数来选择相应的混入来替换。而定义常量参数就不同了，这时候不仅参数的个数要对应的上，而且常量参数的 值和调用时的值也要一样才会匹配的上。值得注意的是我们在 body 中的调用，它调用时指定的第一个参数 none 并不能匹配上前两个混入，而第三个混入.mixin (@zzz, @color)就不同了，由于它的两个参数都是变量，所以它接受任何值，因此它对三个调用都能匹配成功，因此我们在最终的 CSS 代码中看到每次调用的结果中都包含了第三个混入的属性。　　最后，我们把清单 1 中的代码做略微改动，增加一个无参的混入和一个常量参数的混入，您猜猜看最终的匹配结果会发生什么变化么？　　清单 7. 无参和常量参数的模式匹配　　Html代码.border-radius(@radius:3px){border-radius:@-moz-border-radius:@-webkit-border-radius:@}.border-radius(7px){border-radius:7-moz-border-radius:7}.border-radius(){border-radius:4-moz-border-radius:4-webkit-border-radius:4}.button{.border-radius(6px);}.button2{.border-radius(7px);}.button3{.border-radius();}　　下面的结果可能会出乎您的意料，无参的混入是能够匹配任何调用，而常量参数非常严格，必须保证参数的值（7px）和调用的值（7px）一致才会匹配。　　清单 8. 加入了无参混入后生成的 CSS 代码　　Html代码.button{border-radius:6-moz-border-radius:6-webkit-border-radius:6border-radius:4-moz-border-radius:4-webkit-border-radius:4}.button2{border-radius:7-moz-border-radius:7-webkit-border-radius:7border-radius:7-moz-border-radius:7border-radius:4-moz-border-radius:4-webkit-border-radius:4}.button3{border-radius:3-moz-border-radius:3-webkit-border-radius:3border-radius:4-moz-border-radius:4-webkit-border-radius:4}　　条件表达式有了模式匹配之后是方便了很多，我们能根据不同的需求来匹配不同的混入，但更进一步的就是利用条件表达式来更加准确，更加严格的来限制混入的匹配，实现的方式就是利用了when这个关键词。　　清单 9. 利用条件表达式来控制模式匹配　　Html代码.mixin(@a)when(@a&=10){}.mixin(@a)when(@a&10){}.class1{.mixin(12)}.class2{.mixin(6)}　　清单 10. 条件表达式生成的 CSS 代码　　Html代码.class1{}.class2{}　　利用 When 以及 &, &, =, &=, &= 是十分简单和方便的。LESS 并没有停留在这里，而且提供了很多类型检查函数来辅助条件表达式，例如iscolor、isnumber、isstring、iskeyWord、isurl等等。　　清单 11. 条件表达式中支持的类型检查函数　　Html代码.mixin(@a)when(iscolor(@a)){}.mixin(@a)when(isnumber(@a)){}.class1{.mixin(red)}.class2{.mixin(6)}　　清单 12. 类型检查匹配后生成的 CSS 代码　　Html代码.class1{}.class2{}&&&&&今日推荐
&&&&&乌梅，又称春梅，中医认为，乌梅味酸，性温，无毒，具有安心、除热、下气、祛痰、止渴调中、杀虫的功效，治肢体痛、肺痨病。乌梅泡水喝能治伤寒烦热、止吐泻，与干姜一起制...什么是脂肪粒
在我们的脸上总会长一个个像脂肪的小颗粒，弄也弄不掉，而且颜色还是白白的。它既不是粉刺也不是其他的任何痘痘，它就是脂肪粒。
脂肪粒虽然也是由油脂...来源：中国青年报
新的攻击方法不断涌现，黑客几乎永远占据网络攻击的上风，我们不可能通过技术手段杜绝网络攻击。国家安全保障的主要方向是打击犯罪，而不是处置和惩罚...夫妻网络直播“造人”爆红
　　1月9日，温岭城北派出所接到南京警方的协查通告，他们近期打掉了一个涉黄直播APP平台。而根据掌握的线索，其中有一对涉案的夫妻主播...如何防止墙纸老化？
（1）选择透气性好的墙纸
市场上墙纸的材质分无纺布的、木纤维的、PVC的、玻璃纤维基材的、布面的等，相对而言，PVC材质的墙纸最不透气...观点一：破日本销售量的“鲜肌之谜” 非日本生产
近一段时间，淘宝上架了一款名为“鲜肌之谜的” 鲑鱼卵巢美容液，号称是最近日本的一款推出的全新护肤品，产品本身所...系腰裙(北宋词人 张先)
惜霜蟾照夜云天，朦胧影、画勾阑。人情纵似长情月，算一年年。又能得、几番圆。
欲寄西江题叶字，流不到、五亭前。东池始有荷新绿，尚小如...关于女人的经典语句1、【做一个独立的女人】
思想独立：有主见、有自己的人生观、价值观。有上进心,永远不放弃自己的理想，做一份自己喜爱的事业，拥有快乐和成就...你想体验机器人性爱吗？你想和性爱机器人结婚吗？如果你想，机器人有拒绝你的权利吗？
近日，第二届“国际人类-机器人性爱研讨会”大会在伦敦金史密斯大学落下帷幕。而...10.土耳其地下洞穴城市
变态指数：★★☆☆☆
这是土耳其卡帕多西亚的一个著名景点，传说是当年基督教徒们为了躲避战争而在此修建。里面曾住着20000人，......据英国《每日快报》报道，一位科学家兼理论家Robert Lanza博士宣称，世界上并不存在人类死亡，死亡的只是身体。他认为我们的意识借助我们体内的能量生存，而且...《我爱狐狸精》 - 刘馨棋
　　(电视剧《屏里狐》主题曲)
　　作词：金十三&李旦
　　作曲：刘嘉
　　狐狸精 狐狸仙
　　千年修... under pass
自由人非常擅长传球和垫球。
The libero is very go...美女学霸贝微微，立志成为游戏工程师，化名“芦苇微微”跻身网游高手，因拒绝上传真实照片而惨遭侠侣“真水无香”无情抛弃，却意外得到江湖第一高手信肖奈的垂青。为了赢得...目前，研究人员最新设计一款现实版“牵引波束”，可在太空中使用光线捕获物体。
物理学家指出，这种牵引波束可以使用光束捕获和推动物体，移动1厘米的距离。如果未来升...腾讯科学讯 据英国每日邮报报道，未来一种微型思想控制的纳米机器人可以植入人体，通过医师的思维控制药物的送递，从而起到治疗疾病的完美效果。目前，科学家首次使用思想...Kara Zor-El生于氪星球(planet Krypton)，多年前星球毁灭的时候她逃到地球来，一直隐藏自己的超能力。如今24岁，Kara觉得不能使用与生俱...据英国每日邮报报道，科幻电影中曾出现过一些人类与机器人发生性行为的剧情，目前最新一项调查统计显示，28%受调者认为机器人性爱将是一个刺激的新体验。同时，专家分析...目前，空中巴士公司最新设计一款“自动飞行巴士”，有望解决城市交通问题，预计这款“飞行巴士”将于2017年首次试飞。据悉，该飞行器被称为“城市空中巴士”，图中是艺...·&·&·&&&&&&初步认识 LESS,我要开始学习LESS啦！LESS 是一个流行的样式表语言，它提供了 CSS3 也未曾实现的多种功能，让您编写 CSS 更加方便，更加直观。LESS 已经被广泛使用在多种框架中 ( 例如：BootStrap)。本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化，及其典型的应用场景，并将其与其他样式表语言进行比较。相信前端开发工程师会喜欢 LESS，灵活运用 LESS 以提高开发效率。
LESS 背景介绍LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码，在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了（例如 Twitter 提供的 bootstrap 库就使用了 LESS）。那么，LESS 是从何而来呢？它和 SASS 等样式表语言又有何区别呢？
图 1.LESS 的官网介绍
根 据维基百科上的介绍，其实 LESS 是 Alexis Sellier 受 SASS 的影响创建的开源项目。当时 SASS 采用了缩进作为分隔符来区分代码块，而不是 CSS 中广为使用的括号。为了让 CSS 现有用户使用起来更为方便，Alexis 开发了 LESS 并提供了类似的功能。在一开始，LESS 的解释器也同样是由 Ruby 编写，后来才转而采用了 javaScript. LESS 代码既可以运行在客户端，也可以运行在服务器端。在客户端只要把 LESS 代码和相应的 Javascript 解释器在同一页面引用即可；而在服务器端，LESS 可以运行在 Node.js 上，也可以运行在 Rhino 这样的 JavaScript 引擎上。
说一点题外话，其实现在的 SASS 已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和 CSS 一样采用了大括弧作为风格符。后一种语法规则又名 SCSS，在 SASS 3 之后的版本都支持这种语法规则。SCSS 和 LESS 已经越来越像了，它俩之间更详细的对比可以参考此链接。
LESS 高级特性我 们知道 LESS 拥有四大特性：变量、混入、嵌套、函数。这些特性在其他文章中已经有所介绍，这里就不复述了。其实，LESS 还拥有一些很有趣的特性有助于我们的开发，例如模式匹配、条件表达式、命名空间和作用域，以及 JavaScript 赋值等等。让我们来逐一看看这些特性吧。
模式匹配：相信大家对 LESS 四大特性中的混入 (mixin) 依然印象深刻吧，您用它能够定义一堆属性，然后轻松的在多个样式集中重用。甚至在定义混入时加入参数使得这些属性根据调用的参数不同而生成不同的属性。那 么，让我们更进一步，来了解一下 LESS 对混入的更高级支持：模式匹配和条件表达式。
首先，让我们来回顾一下普通的带参数的混入方式：
清单 1. 带参数（及参数缺省值）的混入
Html代码.border-radius(@radius:3px){border-radius:@-moz-border-radius:@-webkit-border-radius:@}.button{.border-radius(6px);}.button2{.border-radius();}
清单 2. 混入生成的 CSS 代码
Html代码.button{border-radius:6-moz-border-radius:6-webkit-border-radius:6}.button2{border-radius:3-moz-border-radius:3-webkit-border-radius:3}
从上面这个例子可以看出，在混入我们可以定义参数，同时也可以为这个参数指定一个缺省值。这样我们在调用这个混入时如果指定了参数.border-radius(6px)，LESS 就会用6px来替换，如果不指定参数来调用.border-radius()，LESS 就会用缺省的3px来替换。现在，我们更近一步，不仅仅通过参数值来更改最终结果，而是通过传入不同的参数个数来匹配不同的混入。
清单 3. 利用不同的参数个数来匹配不同的混入
Html代码.mixin(@a){color:@a;width:10}.mixin(@a,@b){color:fade(@a,@b);}.header{.mixin(red);}.footer{.mixin(blue,50%);}
清单 4. 不同参数个数调用后生成的 CSS 代码
Html代码.header{color:#ff0000;width:10}.footer{color:rgba(0,0,255,0.5);}
这个例子有些像 Java 语言中的方法调用有些类似，LESS 可以根据调用参数的个数来选择正确的混入来带入。现在，我们了解到通过传入参数的值，以及传入不同的参数个数能够选择不同的混入及改变它的最终代码。这两 个例子的模式匹配都是非常容易理解的，让我们换个思路，上面的例子中参数都是由变量构成的，其实在 LESS 中定义参数是可以用常量的！模式匹配时匹配的方式也会发生相应的变化，让我们看个实例。
清单 5. 用常量参数来控制混入的模式匹配
Html代码.mixin(dark,@color){color:darken(@color,10%);}.mixin(light,@color){color:lighten(@color,10%);}.mixin(@zzz,@color){display:weight:@}.header{.mixin(dark,red);}.footer{.mixin(light,blue);}.body{.mixin(none,blue);}
清单 6. 常量参数生成的 CSS 代码
Html代码.header{color:#cc0000;display:weight:}.footer{color:#3333display:weight:}.body{display:weight:}
通过这个例子我们可以看出，当我们定义的是变量参数时，因为 LESS 中对变量并没有类型的概念，所以它只会根据参数的个数来选择相应的混入来替换。而定义常量参数就不同了，这时候不仅参数的个数要对应的上，而且常量参数的 值和调用时的值也要一样才会匹配的上。值得注意的是我们在 body 中的调用，它调用时指定的第一个参数 none 并不能匹配上前两个混入，而第三个混入.mixin (@zzz, @color)就不同了，由于它的两个参数都是变量，所以它接受任何值，因此它对三个调用都能匹配成功，因此我们在最终的 CSS 代码中看到每次调用的结果中都包含了第三个混入的属性。
最后，我们把清单 1 中的代码做略微改动，增加一个无参的混入和一个常量参数的混入，您猜猜看最终的匹配结果会发生什么变化么？
清单 7. 无参和常量参数的模式匹配
Html代码.border-radius(@radius:3px){border-radius:@-moz-border-radius:@-webkit-border-radius:@}.border-radius(7px){border-radius:7-moz-border-radius:7}.border-radius(){border-radius:4-moz-border-radius:4-webkit-border-radius:4}.button{.border-radius(6px);}.button2{.border-radius(7px);}.button3{.border-radius();}
下面的结果可能会出乎您的意料，无参的混入是能够匹配任何调用，而常量参数非常严格，必须保证参数的值（7px）和调用的值（7px）一致才会匹配。
清单 8. 加入了无参混入后生成的 CSS 代码
Html代码.button{border-radius:6-moz-border-radius:6-webkit-border-radius:6border-radius:4-moz-border-radius:4-webkit-border-radius:4}.button2{border-radius:7-moz-border-radius:7-webkit-border-radius:7border-radius:7-moz-border-radius:7border-radius:4-moz-border-radius:4-webkit-border-radius:4}.button3{border-radius:3-moz-border-radius:3-webkit-border-radius:3border-radius:4-moz-border-radius:4-webkit-border-radius:4}
条件表达式有了模式匹配之后是方便了很多，我们能根据不同的需求来匹配不同的混入，但更进一步的就是利用条件表达式来更加准确，更加严格的来限制混入的匹配，实现的方式就是利用了when这个关键词。
清单 9. 利用条件表达式来控制模式匹配
Html代码.mixin(@a)when(@a&=10){}.mixin(@a)when(@a&10){}.class1{.mixin(12)}.class2{.mixin(6)}
清单 10. 条件表达式生成的 CSS 代码
Html代码.class1{}.class2{}
利用 When 以及 &, &, =, &=, &= 是十分简单和方便的。LESS 并没有停留在这里，而且提供了很多类型检查函数来辅助条件表达式，例如iscolor、isnumber、isstring、iskeyWord、isurl等等。
清单 11. 条件表达式中支持的类型检查函数
Html代码.mixin(@a)when(iscolor(@a)){}.mixin(@a)when(isnumber(@a)){}.class1{.mixin(red)}.class2{.mixin(6)}
清单 12. 类型检查匹配后生成的 CSS 代码
Html代码.class1{}.class2{}&&&&&　　免责声明：本文仅代表作者个人观点，与王朝网络无关。王朝网络登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。&&&&&&为你推荐&&&&&&转载本文&UBB代码&HTML代码复制到剪贴板...&更多内容··········&&&&&&&&&频道精选&&&王朝女性&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝分栏&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝编程&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝导购&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝其他&&|&&|&&|&&|&&|&&|&&&&2005-&&版权所有&