zoukankan      html  css  js  c++  java
  • 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less

    写在前面乱七八糟的前言:

    emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自觉~本文侧重于输出Sass,对于Less的话简单带过,毕竟学会了Sass再看Less基本上就都很ok了,如果想简单上手,建议先从Less开始入门,最后再吃下我Compass的安利,┓( ´∀` )┏慢慢盘吧。

    目录

    1、Sass(Syntactically Awesome Style Sheets)

    2、Less(emm找不到全称)

    3、Sass与Less的区别

    4、Compass(Sass的toolkit)

    内容

    1、Sass(Syntactically Awesome Style Sheets)

    1.1安装:

    安装ruby环境,安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量

    在命令行输入gem install sass

    1.2转译Sass(最后引用的还是css文件的!

    在屏幕上直接转化:sass test.scss

    转化成文件:sass test.scss test.css

    ps:文件命名方式最好使用英文,如提示gbk与utf-8等关键字的报错时,文件命名方式使用英文即可

    1.3监听Sass

    //watch a file

    sass --watch test.scss:test.css

    //watch a directory

    sass --watch ./sass:./css

    1.4Vscode的easy Sass

    1.4.1安装easy Sass插件

    1.4.2设置转译目标目录

    文件->首选项->设置(快捷键ctrl+,)->搜索设置->easysass->Target Dir->方框内填写(或直接在settings.json中编辑"easysass.targetDir": "./css/")

    ps:"easysass.targetDir": "./css/"
    意思:easysass的目标目录:""
    所以在变更文件夹时记得修改这个目录
    比如将原先的css文件放在sass文件夹内时,应将路径更改为./sass/css/

    1.5使用

    1.5.1变量:

    声明:$变量名:变量值;

    调用:$变量名

    ps:若变量名需在字符串内嵌套,则需使用#{ }包裹;

    如:$black:#000;

    如:$side:left;

    .test{

    border-#{$side}-color: $black;

    }

    编译为:

    .test{border-left-color:#000;}

    1.5.2运算

    .test{

    margin:(14px/2);

    top:20px+20px;

    right:$var *10%;

    }

    ps:单位会进行运算,注意最终单位

    1.5.3嵌套

    1.5.3.1选择器嵌套:

    ul{

       li{ }

    }

    1.5.3.2属性嵌套

    border:{

                 color:red;

                 width:10px;

    }

    1.5.3.3伪类嵌套

    ul{

        li{

          &:hover{ }

         }

    }

    1.5.4混合

    声明:@mixin name($param:value){ };

    调用:@include name(value)

    ps:声明时可带参可不带,可带默认值,但调用需符合命名规范

    优点:可传参,不会生成同名class

    缺点:将混合代码copy到对应的选择器中

    1.5.5扩展

    缘起:通常都是p,ul{ common style},往往我们需要给单独元素添加另外的样式,这个时候我们就需要把其中选择器单独出来写样式,如此一来我们维护样式就相当的麻烦,有了扩展就很舒服了

    声明:.class{ }

    调用:@extend .class

    优点:继承相同代码并提取到并集选择器中

    缺点:不可传参,在CSS中生成一个同名class

    1.5.6占位符

    声明:%class{ }

    调用:@extand %class

    优点:继承相同代码并提取到并集选择器,不会生成同名的class选择器

    缺点:无法传参

    ps:传参用混合,先有class用继承,无须参数无须class用占位符

    1.5.7if语句

    @if{ }

    @else{ }

    1.5.8for循环

    @for $i from 1 to 10{ }不含十;

    @for $i from 1 through 10{ }含十;

    1.5.9while循环

    $j:1;

    @while $j<10{

                  .while#{$j}{

                            border:#{$j}px solid red;

                   }

                   $j:$j+1;

    }

    1.5.0each循环遍历

    @each item in a,b,c,d{

    //item 表示每一项

    }

    1.5.11函数

    @function func($length){

                $length:$length*5;

                @return $length;

    }

    调用:func(10px);

    2、Less(emm找不到全称)

    2.1安装:

    引入node.js

    在命令行输入$ npm install -g less

    2.2转译Less(可引用less文件也可引用css文件)

    2.2.1命令行:

    在屏幕上直接转化:$ lessc styles.less

    转化成文件:$ lessc styles.less styles.css

    转化成压缩版:$ lessc --clean-css styles.less styles.min.css

    2.2.2代码:略

    2.2.3浏览器端:

    <link rel="stylesheet/less" type="text/css" href="styles.less" />

    <script src="less.js" type="text/javascript"></script>

    下载链接 

    CDN加速:<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

    2.3使用:

    2.3.1变量:

    声明:@变量名:变量值;

    调用:@变量名

    2.3.2其他:略

    3、Sass与Less的区别

    3.1Less优势:让开发者平滑地从现存CSS文件过渡到LESS,而无需像Sass一样将CSS文件转换成Sass;有全局变量

    3.2编译环境:

    Sass需要安装ruby环境,是服务端处理的

    Less需node js环境,引入less.js,是客户端处理的

    3.2变量符

    Sass用$

    Less用@

    3.3输出设置

    Sass:四种输出风格,默认nested

    nested:嵌套缩进

    expanded:展开多行

    compact:简洁格式

    compressed:压缩

    Less:嵌套与压缩min

    3.4工具库

    Sass:Compass,基于Sass的封装

    Less:UI组件库Bootstrap

    3.5文件转译

    Sass:源文件不能给浏览器直接识别,需转译为css

    Less:源文件无需转译为css

    3.6作用域

    Sass:无全局作用域,定义相同变量名时,在调用要注意

    Less:首先定义局部定义的变量,若无,像冒泡一样一级级往下查找,直到根为止

    3.7使用

    3.7.1混合:

    Sass:

    /*声明一个Mixin叫作“error”*/
    @mixin error($borderWidth:2px){
      border:$borderWidth solid #f00;
      color: #f00;
    }
    /*调用error Mixins*/
    .generic-error {
      @include error();/*直接调用error mixins*/
    }
    .login-error {
      @include error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/
    }

    Less:

    /*声明一个Mixin叫作“error”*/
    .error(@borderWidth:2px){
      border:@borderWidth solid #f00;
      color: #f00;
    }
    /*调用error Mixins*/
    .generic-error {
      .error();/*直接调用error mixins*/
    }
    .login-error {
      .error(5px);/*调用error mixins,并将参数@borderWidth的值重定义为5px*/
    }	

    3.7.2其他高级语法:略

    4、Compass(Sass的toolkit)

    4.1Compass是什么

    简单讲:Compass是Sass的工具库(toolkit)

    Sass本身只是一个编译器,Compass由SASS的核心团队成员Chris Eppstein创建,在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系

    4.2Compass安装与编译

    1.安装
    Linux或OS X且已安装ruby 命令行输入:sudo gem install compass Windows系统且已安装ruby 省略sudo
    2.项目初始化
    compass create test
    3.编译
    compass complie
    该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中
    默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style参数
    compass compile --output-style compressed
    Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数
    compass compile --force
    除了使用命令行参数,还可以在配置文件config.rb中指定编译模式
    output_style = :expanded
    :expanded模式表示编译后保留原格式,其他值还包括:nested、:compact和:compressed。进入生产阶段后,就要改为:compressed模式
    output_style = :compressed
    也可以通过指定environment的值(:production或者:development),智能判断编译模式
    environment = :development
    output_style = (environment == :production) ? :compressed : :expanded
    在命令行模式下,除了一次性编译命令,compass还有自动编译命令
    compass watch
    运行该命令后,只要scss文件发生变化,就会被自动编译成css文件
    1.gem安装Sass
      C:UsersDELL>gem install sass
    
    2.查看Sass版本
      C:UsersDELL>sass -v
      Sass 3.4.13 (Selective Steve)
    
    3.编译Sass文件
      sass main.scss main css
      // 一般很少使用sass命令,一般都是用Compass命令;
    
    4.gem安装Compass
      C:UsersDELL>gem install compass
    
    5.查看Compass版本
      C:UsersDELL>compass -v
      Compass 1.0.3 (Polaris)
    6.Compass搭建项目
      C:UsersDELLcompass create sass
      // 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5   directory sass/
      directory sass/sass/                  // sass文件所在目录;
      directory sass/stylesheets/           // css文件所在目录;
         create sass/config.rb              // 项目配置文件;
         create sass/sass/screen.scss       // 主要针对屏幕的sass文件;
         create sass/sass/print.scss        // 主要针对打印设备;
         create sass/sass/ie.scss           // 主要针对IE浏览器;
          write sass/stylesheets/ie.css
          write sass/stylesheets/print.css
          write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;
    
      // You may now add and edit sass stylesheets in the sass subdirectory of your project.
      // 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;
    
      // Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.
      // Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;
    
      // You can configure your project by editing the config.rb configuration file.
      // 你可以通过编辑config.rb配置文件来配置项目信息; 
    
      // You must compile your sass stylesheets into CSS when they change.
      // 当Sass文件被修改后,必须要编译Sass文件到CSS;
    
      // 1. To compile on demand:                   // 直接编译;                      
      // compass compile [path/to/project]
      // 2. To monitor your project for changes and automatically recompile:  
      // compass watch [path/to/project]            // 监听项目变化并且自动编译; 
    
      // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
      // <head>
      //   <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
      //   <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
      //   <!--[if IE]>
      //       <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
      //   <![endif]-->
      // </head>
      // 将编译后的文件引入到HTML页面中;

    更多命令行方法参考:Compass官网

    4.3Compass使用

    Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:

    * reset
    * css3
    * layout
    * typography
    * utilities

    你还可以自行加载网上的第三方模块,或者自己动手编写模块

    4.3.1reset模块

    编写自己的样式之前,有必要重置浏览器的默认样式

    @import "compass/reset";

    @import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码

    4.3.2css3模块

    该模块提供19种CSS3命令

    圆角

    @import "compass/css3";

      .rounded {
        @include border-radius(5px);
      }

    @include命令,表示调用某个mixin(类似于C语言的宏),5px是参数,这里用来指定圆角的半径

    编译后的代码为

    .rounded {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
      }

    如果只需要左上角为圆角,写法为

    @include border-corner-radius(top, left, 5px);

    透明

    @import "compass/css3";

      #opacity {
        @include opacity(0.5); 
      }

    编译后生成

    #opacity {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
        opacity: 0.5;
      }

    行内区块

    @import "compass/css3";

      #inline-block {
        @include inline-block;
      }

    编译后生成

    #inline-block {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        zoom: 1;
        *display: inline;
      }

    4.3.3layout模块

    提供布局功能

    比如,指定页面的footer部分总是出现在浏览器最底端:

    @import "compass/layout";

      #footer {
        @include sticky-footer(54px);
      }

    比如,指定子元素占满父元素的空间:

    @import "compass/layout";

      #stretch-full {
        @include stretch; 
      }

    4.3.4typography模块

    提供版式功能

    指定链接颜色的mixin为:

     link-colors($normal, $hover, $active, $visited, $focus);

    使用时写成:

    @import "compass/typography";

      a {
        @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
      }

    4.3.5utilities模块

    供某些不属于其他模块的功能

    比如,清除浮动

    import "compass/utilities/";

      .clearfix {
        @include clearfix;
      }

    比如表格:

    @import "compass/utilities";

      table {
        @include table-scaffolding;
      }

    编译后生成

    table th {
        text-align: center;
        font-weight: bold;
      }

      table td,
      table th {
        padding: 2px;
      }

      table td.numeric,
      table th.numeric {
        text-align: right;
      }

    4.3.6Helper函数

    除了模块,Compass还提供一系列函数

    有些函数非常有用,比如image-width()image-height()返回图片的宽和高。

    再比如,inline-image()可以将图片转为data协议的数据。

    @import "compass";

      .icon { background-image: inline-image("icon.png");}

    编译后得到

      .icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

    函数与mixin的主要区别是,不需要使用@include命令,可以直接调用。

    参考文献:

    Sass与Compass入门

    阮一峰Compass用法指南

    Less入门手册

    Sass中文网

    environment = :development

      output_style = (environment == :production) ? :compressed : :expanded

  • 相关阅读:
    寻找SQL注入点
    根域名服务器
    Solr 文章集成
    Android事件分发机制
    王自如与老罗的辩论赛谁赢了?!
    ACdream原创群赛(13)のwuyiqi退役专场 C True love
    使用JS对select标签进行联动选择
    c++代码赏析之类对象传參
    基因治疗的现状
    解决手机訪问站点时总体相对屏幕缩小问题?(已解决)
  • 原文地址:https://www.cnblogs.com/nightnight/p/10745897.html
Copyright © 2011-2022 走看看