精华内容
下载资源
问答
  • 今天我们来学习一下这四...css 的写法大家都知道,没有变量,格式也不能嵌套,代码多且冗余,为了让样式写起来舒服,高效,方便一些,就有了 lesssassstylus, 他们的语法满足了你对简便方法的写法,并能够通...

    今天我们来学习一下这四个它们的关系与区别。

    首先, css 即层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。(百度百科)

    css 的写法大家都知道,没有变量,格式也不能嵌套,代码多且冗余,为了让样式写起来舒服,高效,方便一些,就有了 less 和 sass 、stylus, 他们的语法满足了你对简便方法的写法,并能够通过编译转换成对应的 css 代码,所以他们也叫做 css 预处理器。

    详细介绍地址, 不了解的请一定要先进行观看: Sass vs. LESS vs. Stylus:Preprocessor Shootout

    如果说这三种是 css 预处理器,那么 postcss 又是啥呢?
    见官方 github

    PostCSS是一个使用JS插件转换样式的工具。这些插件可以提升CSS,支持变量和混合,转换未来的CSS语法,内联图像等。

    也就是说你可以在 postcss 写类似 sass 的语法,或者一系列 postcss 插件支持的功能,然后使用 postcss 插件进行编译成 css 代码。它和前面三个的区别就是,它可以实现自定义化,根据你需要的功能,配置相应的插件,做一个适合自己的预处理器。

    它现在也是有非常非常多的插件的。

    precss 包含类似Sass功能的插件,如变量(custom-properties),嵌套(nesting) 和 mixins。
    postcss-sorting 对规则和规则的内容进行排序。
    postcss-custom-properties 自定义变量并保留属性。
    postcss-utilities 包括最常用的快捷方式和帮助程序。

    关于 postcss 插件的组合方法我们可以通过看 precss 的用法示例

    "precss": {
          "version": "1.4.0",
          "resolved": "http://registry.npm.souche-inc.com/precss/download/precss-1.4.0.tgz",
          "integrity": "sha1-jXw65w8QoAo5VSh/haZuD4sxzaM=",
          "dev": true,
          "requires": {
            "postcss": "^5.0.10",
            "postcss-advanced-variables": "1.2.2",  // CSS中使用变量,条件和迭代器。
            "postcss-atroot": "^0.1.2",
            "postcss-color-function": "^2.0.0", // 颜色方法
            "postcss-custom-media": "^5.0.0", // media 选择器
            "postcss-custom-properties": "^5.0.0", // css3 变量
            "postcss-custom-selectors": "^3.0.0",  // 自定义选择器
            "postcss-extend": "^1.0.1", 
            "postcss-media-minmax": "^2.1.0",
            "postcss-mixins": "^2.1.0",
            "postcss-nested": "^1.0.0",
            "postcss-nesting": "^2.0.6",
            "postcss-partial-import": "^1.3.0", 
            "postcss-property-lookup": "^1.1.3",
            "postcss-selector-matches": "^2.0.0",
            "postcss-selector-not": "^2.0.0"
            }
    

    其实就是引了这些插件之后,你就可以用高级的语法糖了。有兴趣的可以去 github 看看这些插件功能。

    展开全文
  • Stylus Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style. Installation $ npm ...
  • sasslessstylus区别

    2021-01-12 10:24:04
    sasslessstylus 1、插值 sass $version: "1.2.3"; #{$version}{ } less @my-selector: banner; .@{my-selector} { } 2、变量命名 sass $version: "1.2.3"; less @version: "1.2.3"; stylus version: "1.2.3...

    sass、less、stylus

    1、插值

    sass

    $version: "1.2.3";
    #{$version}{
    }
    

    less

    @my-selector: banner;
    .@{my-selector} {
    }
    

    2、变量命名

    sass

    $version: "1.2.3";
    

    less

    @version: "1.2.3";
    

    stylus

    version: "1.2.3";
    

    3、全局声明

    sass

    !global 声明
    

    4、混合

    Sass

    @mixin error($borderWidth: 2px) {
      border: $borderWidth solid #F00;
      color: #F00;
    }
    .generic-error {
      @ include error(); /* Applies styles from mixin error */
    }
    .login-error {
      @ include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
    }
    

    Less

    
    .error(@borderWidth: 2px) {
      border: @borderWidth solid #F00;
      color: #F00;
    }
    .generic-error {
      .error(); /* Applies styles from mixin error */
    }
    .login-error {
      .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
    }
    

    Stylus

    error(borderWidth= 2px) {
      border: borderWidth solid #F00;
      color: #F00;
    }
    .generic-error {
      error(); /* Applies styles from mixin error */
    }
    .login-error {
      error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
    }
    

    5、继承

    sass/stylus: @extend .error;

    .error {
      border: 1px #f00;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    

    less : &:extend(.error);

    .error {
      border: 1px #f00;
    }
    .seriousError {
       .error;
      border-width: 3px;
    }
    

    6、循环

    sass

    @for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
    }
    
    //解析为
    .item-1 {
      width: 2em; }
    .item-2 {
      width: 4em; }
    .item-3 {
      width: 6em; }
    

    less

    .loop(@counter) when (@counter > 0) {
      .loop((@counter - 1));    // next iteration
      width: (10px * @counter); // code for each iteration
    }
    
    div {
      .loop(5); // launch the loop
    }
    
    //解析为
    div {
      width: 10px;
      width: 20px;
      width: 30px;
      width: 40px;
      width: 50px;
    }
    

    7、编译

    sass通过ruby编译

    less通过·javascript编译

    8、一些跟具体浏览器相关的处理

    这是宣传使用预处理的原因之一,并且是一个很好的理由,这样可以节省的大量的时间和汗水。创建一个mixin来处理不同浏览器的CSS写法是很简单的,节省了大量的重复工作和痛苦的代码编辑。

    Sass

    @mixin border-radius($values) {
      -webkit-border-radius: $values;
         -moz-border-radius: $values;
              border-radius: $values;
    }
     
    div {
      @ include border-radius(10px);
    }
    

    Less

    .border-radius(@values) {
      -webkit-border-radius: @values;
         -moz-border-radius: @values;
              border-radius: @values;
    }
     
    div {
      .border-radius(10px);
    }
    

    Stylus

    border-radius(values) {
      -webkit-border-radius: values;
         -moz-border-radius: values;
              border-radius: values;
    }
     
    div {
      border-radius(10px);
    }
    

    编译结果:

    div {
      -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
              border-radius: 10px;
    }
    
    展开全文
  • 现在的项目中越来越多的需要用到css预编译语言,现在的预编译语言主要就有sass,less,stylus,也是用的最多的,它们有什么不同呢?下面就是这三种语言的区别总结

    CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。

    1.什么是 CSS 预处理器

    CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让CSS 更见简洁,适应性更强,代码更直观等诸多好处。

    2.基本语法区别:

    在使用 CSS 预处理器之前最重要的是理解语法,幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。

    首先 Sass 和 Less 都使用的是标准的 CSS 语法,因此如果可以很方便的将已有的 CSS 代码转为预处理器代码,默认 Sass 使用 .sass 扩展名,而 Less 使用 .less 扩展名。

    /* style.scss or style.less */
    h1 {
      color: #0982C1;
    }
    • 1
    • 2
    • 3
    • 4

    这是一个再普通不过的,不过 Sass 同时也支持老的语法,就是不包含花括号和分号的方式:

    /* style.sass */
    h1
      color: #0982c1
    • 1
    • 2
    • 3

    而 Stylus 支持的语法要更多样性一点,它默认使用 .styl 的文件扩展名,下面是 Stylus 支持的语法:

    /* style.styl */
    h1 {
      color: #0982C1;
    }
    
    /* omit brackets */
    h1
      color: #0982C1;
    
    /* omit colons and semi-colons */
    h1
      color #0982C1
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    可以在同一个样式单中使用不同的变量,例如下面的写法也不会报错:

    h1 {
      color #0982c1
    }
    h2
      font-size: 1.2em
    • 1
    • 2
    • 3
    • 4
    • 5

    3.变量

    1. sass:

    Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。

         sass变量必须是以$开头的,然后变量和值之间使用冒号(:)隔开,和css属性是一样的,例如:
    
    • 1
    • 2
    $maincolor : #092873;
    $siteWidth : 1024px;
    $borderStyle : dotted;
    body {
      color: $maincolor;
      border: 1px $borderStyle $mainColor;
      max-width: $siteWidth;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.less css :

    在less文件中,当一个值需要反复使用时,可以通过@符号定义变量。已经被赋值的变量以及其他的常量(如像素、颜色等)都可以参与运算。

     Less css中变量都是用@开头的,其余与sass都是一样的,例如:
    
    • 1
    • 2
    @maincolor : #092873;
    @siteWidth : 1024px;
    @borderStyle : dotted;
    body {
      color: @maincolor;
      border: 1px @borderStyle @mainColor;
      max-width: @siteWidth;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3.stylus:

     stylus对变量是没有任何设定的,可以是以$开头,或者任何的字符,而且与变量之间可以用冒号,空格隔开,
     但是在stylus中不能用@开头,例如:    
    
    • 1
    • 2
    • 3
    maincolor = #092873
    siteWidth = 1024px
    borderStyle = dotted
    body 
      color maincolor
      border 1px borderStyle mainColor
      max-width siteWidth
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    以上三种写法都如同一下这种css:

    body {
      color: #092873;
      border: 1px dotted #092873;
      max-width: 1024px;
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    这样做的好处也是显而易见的,在修改多处相同颜色的时候,这时就只需要修改变量值即可。

    4.嵌套

    如果我们需要在CSS中相同的 parent 引用多个元素,这将是非常乏味的,你需要一遍又一遍地写 parent。例如:

    div {
      margin: 10px;
    }
    div nav {
      height: 25px;
    }
    div nav a {
      color: #0982C1;
    }
    div nav a:hover {
      text-decoration: underline;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    如果用 CSS 预处理器,就可以少写很多单词,而且父子节点关系一目了然,并且sass,Less,stylus都支持下面这样的写法,且都是相同的:

    //scss style //----------------------------------- 
    nav { 
        ul { 
           margin: 0; 
           padding: 0; 
        } 
        li { 
           display: inline-block; 
        } 
        a { 
           display: block; 
           padding: 6px 12px; 
           text-decoration: none; 
        } 
    }
    //css style //----------------------------------- 
    nav ul { 
        margin: 0; 
        padding: 0; 
        list-style: none; 
    } 
    nav li { 
        display: inline-block; 
    } 
    nav a { 
        display: block; 
        padding: 6px 12px; 
        text-decoration: none; 
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    这样做是非常方便的,也很直观。

    5.运算符

    在 CSS 预处理器中还是可以进行样式的计算如下:

    body {
      margin: (14px/2);
      top: 50px + 100px;
      right: 80 * 10%;
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    在sass,Less与stylus中都是可以这样做的。

    6.颜色函数

    CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理,例如加亮、变暗、颜色梯度等。

    1.sass的颜色处理函数:

    lighten($color, 10%); 
    darken($color, 10%);  
    saturate($color, 10%);   
    desaturate($color, 10%);
    grayscale($color);  
    complement($color); 
    invert($color); 
    mix($color1, $color2, 50%); 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    实例如下:

    $color: #0982C1;
    h1 {
      background: $color;
      border: 3px solid darken($color, 50%);
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    2.Less css颜色处理函数:

    lighten(@color, 10%); 
    darken(@color, 10%);  
    saturate(@color, 10%);  
    desaturate(@color, 10%); 
    spin(@color, 10); 
    spin(@color, -10); 
    mix(@color1, @color2);
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    示例如下:

    @color: #0982C1;
    h1 {
      background: @color;
      border: 3px solid darken(@color, 50%);
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    3.Stylus颜色处理函数:

    lighten(color, 10%); 
    darken(color, 10%);  
    saturate(color, 10%);  
    desaturate(color, 10%); 
    • 1
    • 2
    • 3
    • 4

    示例如下;

    color = #0982C1 
    h1
      background color
      border 3px solid darken(color, 50%)
    • 1
    • 2
    • 3
    • 4

    7.导入 (Import)

    很多 CSS 开发者对导入的做法都不太感冒,因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同,它只是在语义上包含了不同的文件,但最终结果是一个单一的 CSS 文件,如果你是通过 @ import “file.css”; 导入 CSS 文件,那效果跟普通的 CSS 导入一样。

    注意:导入文件中定义的混入、变量等信息也将会被引入到主样式文件中,因此需要避免它们互相冲突。 
    例如: 
    1.css:

    //1.css
    /* file.{type} */
    body {
      background: #000;
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    2.XXX:

    @ import "1.css";
    @ import "file.{type}";
    
    p {
      background: #092873;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    最终生成的 CSS:

    @ import "1.css";
    body {
      background: #000;
    }
    p {
      background: #092873;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    8.继承

    当我们需要为多个元素定义相同样式的时候,我们可以考虑使用继承的做法.

    1.sass: 
    sass可通过@extend来实现代码组合声明,使代码更加优越简洁。

    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    .success {
      @extend .message;
      border-color: green;
    }
    .error {
      @extend .message;
      border-color: red;
    }
    .warning {
      @extend .message;
      border-color: yellow;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    2.Less css:

    但是在这方面 Less 表现的稍微弱一些,更像是混入写法:

    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    .success {
      .message;
      border-color: green;
    }
    .error {
      .message;
      border-color: red;
    }
    .warning {
      .message;
      border-color: yellow;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    上面两种写法其最终呈现的css样式都如下:

    .message, .success, .error, .warning {
      border: 1px solid #cccccc;
      padding: 10px;
      color: #333;
    }
    .success {
      border-color: green;
    }
    .error {
      border-color: red;
    }
    .warning {
      border-color: yellow;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    .message的样式将会被插入到相应的你想要继承的选择器中,但需要注意的是优先级的问题。

    9.Mixins(混入)

    Mixins 有点像是函数或者是宏,当某段 CSS 经常需要在多个元素中使用时,可以为这些共用的 CSS 定义一个 Mixin,然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

    1.Sass 的混入语法:

    sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。比如说处理css3浏览器前缀:

    @mixin error($borderWidth: 2px) {
      border: $borderWidth solid #F00;
      color: #F00;
    }
    .generic-error {
      padding: 20px;
      margin: 4px;
      @ include error(); //这里调用默认 border: 2px solid #F00;
    }
    .login-error {
      left: 12px;
      position: absolute;
      top: 20px;
      @ include error(5px); //这里调用 border:5px solid #F00;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    2.Less CSS 的混入语法: 
    less也支持带参数的混合以及有默认参数值的混合,如下面的例子所示:

    .error(@borderWidth: 2px) {
      border: @borderWidth solid #F00;
      color: #F00;
    }
    .generic-error {
      padding: 20px;
      margin: 4px;
      .error(); //这里调用默认 border: 2px solid #F00;
    }
    .login-error {
      left: 12px;
      position: absolute;
      top: 20px;
      .error(5px); //这里调用 border:5px solid #F00;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    3.Stylus 的混入语法:

    error(borderWidth= 2px) {
      border: borderWidth solid #F00;
      color: #F00;
    }
    .generic-error {
      padding: 20px;
      margin: 4px;
      error(); 
    }
    .login-error {
      left: 12px;
      position: absolute;
      top: 20px;
      error(5px); 
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    他们最终呈现的效果都如下:

    .generic-error {
      padding: 20px;
      margin: 4px;
      border: 2px solid #f00;
      color: #f00;
    }
    .login-error {
      left: 12px;
      position: absolute;
      top: 20px;
      border: 5px solid #f00;
      color: #f00;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    10.3D文本

    要生成具有 3D 效果的文本可以使用 text-shadows ,唯一的问题就是当要修改颜色的时候就非常的麻烦,而通过 mixin 和颜色函数可以很轻松的实现:

    1.sass:

    @mixin text3d($color) {
      color: $color;
      text-shadow: 1px 1px 0px darken($color, 5%),
                   2px 2px 0px darken($color, 10%),
                   3px 3px 0px darken($color, 15%),
                   4px 4px 0px darken($color, 20%),
                   4px 4px 2px #000;
    }
    
    h1 {
      font-size: 32pt;
      @ include text3d(#0982c1);
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    2.Less CSS:

    .text3d(@color) {
      color: @color;
      text-shadow: 1px 1px 0px darken(@color, 5%),
                   2px 2px 0px darken(@color, 10%),
                   3px 3px 0px darken(@color, 15%),
                   4px 4px 0px darken(@color, 20%),
                   4px 4px 2px #000;
    }
    
    span {
      font-size: 32pt;
      .text3d(#0982c1);
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3.Stylus:

    text3d(color)
      color: color
      text-shadow: 1px 1px 0px darken(color, 5%), 
                   2px 2px 0px darken(color, 10%), 
                   3px 3px 0px darken(color, 15%), 
                   4px 4px 0px darken(color, 20%), 
                   4px 4px 2px #000
    span
      font-size: 32pt
      text3d(#0982c1)
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    其生成的css最终的效果如下:

    span {
      font-size: 32pt;
      color: #0982c1;
      text-shadow: 1px 1px 0px #097bb7,
                   2px 2px 0px #0875ae,
                   3px 3px 0px #086fa4,
                   4px 4px 0px #07689a,
                   4px 4px 2px #000;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    11.列 (Columns)

    使用数值操作和变量可以很方便的实现适应屏幕大小的布局处理。 
    1.Sass:

    $siteWidth: 1024px;
    $gutterWidth: 20px;
    $sidebarWidth: 300px;
    body {
      margin: 0 auto;
      width: $siteWidth;
    }
    .content {
      float: left;
      width: $siteWidth - ($sidebarWidth+$gutterWidth);
    }
    .sidebar {
      float: left;
      margin-left: $gutterWidth;
      width: $sidebarWidth;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    2.Less CSS:

    @siteWidth: 1024px;
    @gutterWidth: 20px;
    @sidebarWidth: 300px;
    
    body {
      margin: 0 auto;
      width: @siteWidth;
    }
    .content {
      float: left;
      width: @siteWidth - (@sidebarWidth+@gutterWidth);
    }
    .sidebar {
      float: left;
      margin-left: @gutterWidth;
      width: @sidebarWidth;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    3.Stylus:

    siteWidth = 1024px;
    gutterWidth = 20px;
    sidebarWidth = 300px;
    
    body {
      margin: 0 auto;
      width: siteWidth;
    }
    .content {
      float: left;
      width: siteWidth - (sidebarWidth+gutterWidth);
    }
    .sidebar {
      float: left;
      margin-left: gutterWidth;
      width: sidebarWidth;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    其最终生成的css效果如下:

    body {
      margin: 0 auto;
      width: 1024px;
    }
    .content {
      float: left;
      width: 704px;
    }
    .sidebar {
      float: left;
      margin-left: 20px;
      width: 300px;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    12.高级语法

    1.在sass中,还支持条件语句:

        @if可一个条件单独使用,也可以和@else结合多条件使用
    
    • 1
    • 2

    代码如下:

    $lte7: true;
    $type: monster;
    .ib{
        display:inline-block;
        @if $lte7 {
            *display:inline;
            *zoom:1;
        }
    }
    p {
      @if $type == ocean {
        color: blue;
      } @else if $type == matador {
        color: red;
      } @else if $type == monster {
        color: green;
      } @else {
        color: black;
      }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    其最终的css代码如下:

    .ib{
        display:inline-block;
        *display:inline;
        *zoom:1;
    }
    p {
      color: green; 
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.除却条件语句,sass还支持for循环:

    for循环有两种形式,分别为:

    1.@for $var from <start> through <end>
    2.@for $var from <start> to <end>。
    • 1
    • 2

    其中$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。

    @for $i from 1 to 10 {
      .border-#{$i} {
        border: #{$i}px solid blue;
      }
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    同时也支持while循环:

    $i: 6;
    @while $i > 0 {
      .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
    }
    • 1
    • 2
    • 3
    • 4
    • 5

    最后,同时支持each命令,作用与for类似:

    $animal-list: puma, sea-slug, egret, salamander;
    @each $animal in $animal-list {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
      }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    其css最终效果如下:

    .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'); 
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    以上就是sass,Less css与stylus的最显著的区别。


    展开全文
  • SassLessStylus 的缓动变量 使用 SassLessStylus 缓动动画的一些有用变量。 安装 使用 Bower 安装: $ bower install --save sass-less-stylus.easing 使用 npm 安装: $ npm install --save sass-...
  • Sass vs Less vs Stylus

    2017-07-13 16:21:11
    Less Sass Stylus 安装 npm install -g less,即可被编译成.css文件 先安装ruby,再安装sass:gem install sass。 四种编译风格。 npm install stylus 变量 使用@标识符,@border-color:#...
      Less Sass Stylus
    安装 npm install -g less,即可被编译成.css文件

    先安装ruby,再安装sass:gem install sass。

    四种编译风格。

    npm install stylus

    变量 使用@标识符,@border-color:#CCCCCC;
    @border-color : #b5bcc7; 
     
    .mythemes tableBorder{ 
      border : 1px solid @border-color; 
    }
    作用域:Less有全局变量与局部变量
    使用:$标识符。
    $blue : #1875e7; 
    div {
     color : $blue;
    }
    变量需要写在字符串中时,必须写在#{}中
    全是全局变量,到那时可以通过!default来改变值

    直接指定变量:font-size =
    font-size = 14px
    
    body
      font font-size Arial, sans-seri

    14px
    插值

    通过使用{}字符包围表达式来插入值,其会变成标识符的一部分

    vendor(prop, args)
      -webkit-{prop} args
      -moz-{prop} args
      {prop} args
    
    border-radius()
      vendor('border-radius', arguments)
    
    box-shadow()
      vendor('box-shadow', arguments)
    
    button
      border-radius 1px 2px / 3px 4px


    计算 组织数值型value。提供加减乘除运算。
    @init: #111111; 
    @transition: @init*2; 
    .switchColor { 
    color: @transition; 
    }
    提供加减乘除运算。
    body {
        margin: (14px/2);
        top: 50px + 100px;
        right: $var * 10%;
      }

    一元运算符

    二元运算符

    范围”..", "..."

    指数:**

    相等与关系运算

    真假

    逻辑运算

    存在操作:in



    嵌套
    #home{ 
      color : blue; 
      width : 600px; 
      height : 500px; 
      border:outset; 
      #top{ 
           border:outset; 
           width : 90%; 
      } 
      #center{ 
           border:outset; 
           height : 300px; 
           width : 90%; 
           #left{ 
             border:outset; 
             float : left; 
     width : 40%; 
           } 
           #right{ 
             border:outset; 
             float : left; 
     width : 40%; 
           } 
       } 
    }
    嵌套方式与html比较类似
    在嵌套代码中,可以使用&引用父元素
    a {
        &:hover { color: #ffb3ff; }
      }
     
    注释 “//”,单行注释,不能显示在编译后的css中;"/**/“多行注释 “//”,单行注释,不能显示在编译后的css中;"/**/“多行注释

    • //单行注释,
    • /*

                  *多行注释

                   */

    • /*!

                  *多行缓冲注释

                  */

    Mixin 在class中引入一个已经定义了的class,可带参数
    // 定义一个样式选择器
     .roundedCorners(@radius:5px) { 
     -moz-border-radius: @radius; 
     -webkit-border-radius: @radius; 
     border-radius: @radius; 
     } 
     // 在另外的样式选择器中使用
     #header { 
     .roundedCorners; 
     } 
     #footer { 
     .roundedCorners(10px); 
     }
    只需在classB中根据classA的命名使用。
    使用@Mixin命令定义,使用@include命令调用
     @mixin left {
        float: left;
        margin-left: 10px;
      }

    div {
        @include left;
      }
    border-radius(n)
      -webkit-border-radius n
      -moz-border-radius n
      border-radius n
    
    form input[type=button]
      border-radius(5px)

    继承

    允许一个选择器集成另一个选择器

    .class1 {
        border: 1px solid #ddd;
      }
    .class2 {
        @extend .class1;
        font-size:120%;
      }

    父级引用:混合书写可以利用&继承
    stripe(even = #fff, odd = #eee)
     tr
       background-color odd
       &.even
       &:nth-child(even)
           background-color even
    
    table
      stripe()
      td
        padding 4px 10px
    
    table#users
      stripe(#303030, #494848)
      td
        color white
    条件语句
    • if、if...else
    • switch
    • if、if...else
    • unless
    • negative
    循环语句
    • for
    • while
    • each
    • for/in
    • Mixins使用循环
    • 函数
    • if/unless
    函数  
    @function double($n) {
            @return $n * 2;
          }
         
          #sidebar {
            width: double(5px);
          }
    有自定义函数
    add(a, b)
      a + b
    body 
      padding add(10px, 5)


    实现方式 基于javascript,客户端 基于ruby,服务端  

    stylus与前两个与处理语言最大的不同是不适用{},而改成使用缩进。

    展开全文
  • sassstylus 利用缩进换行空格减少要输入的字符 1、基本: less sassstylus .nav{ height: 300px; } .nav height: 300px; 2、嵌套: less sassstylus ...
  • CSS 预处理器框架,分别是 SassLessStylus。CSS预处理器为CSS提供了更多的更加灵活的可编程性。 增加了变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等特性。 0.背景介绍 Sass:2007年诞生,最早...
  • CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 ...首先 SassLess 都使用的是标准的 CSS 语法,默认 Sass 使用 .sass 扩展名,而 Less 使用 .less 扩展名...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,302
精华内容 2,920
关键字:

lesssassstylus的区别