HTML5技术

sass的安装,编译,还有风格 - 空一座旧城,守一个旧人

字号+ 作者:H5之家 来源:H5之家 2017-12-08 08:07 我要评论( )

1.安装sass1.安装ruby 因为sass是用ruby语言写的,所以需要安装ruby环境 打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径 [x] Add Ruby executables to your PATH 安装完成之后继续下一步操作 2.安装sass 在cmd里通过gem安装sass gem是ruby的包管

1.安装sass 1.安装ruby

因为sass是用ruby语言写的,所以需要安装ruby环境

打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径

  • [x] Add Ruby executables to your PATH
  • 安装完成之后继续下一步操作

    2.安装sass

    在cmd里通过gem安装sass

    gem是ruby的包管理工具,类似于nodejs 的npm

    gem install sass

    这个时候如果不FQ的话是会出问题的,因为:

    由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了

    $ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a 】 $ gem sources -l *** CURRENT SOURCES *** https://ruby.taobao.org # 请确保只有 ruby.taobao.org $ gem install sass

    安装好之后执行sass -v就可以看到sass的版本了

    实在实在不行,就安装离线文件吧,但是失败率也很高

    gem install ./.../sass-3.4.22.gem

    2.编译sass文件的方式 1.命令行编译

    可以通过cmd命令行执行sass方法来编译

    例如:

    sass scss/a.scss:css/a.css

    sass 后面写要编译的sass文件的路径,‘:’后面写的是
    要输出的目录及名字

  • 需要注意的是:必须有这个文件夹才能在里面生成css
  • 这样的话写一句执行一次编译一次有些太麻烦

    可以开启一个watch来监听文件变化来进行编译

    sass --watch scss:css

    --watch表示要监听 :前后的两个都是文件夹,表示scss文件夹的文件改变就编译到css文件夹

    2.其他方式编译

    除了命令行工具其实还可以用考拉、gulp等工具进行编译,但是ruby和sass是必须要安装的

    考拉的方式就不多做介绍了,大家i自己去看一下

    gulp的话呢是需要gulp-sass的模块来编译,使用方式类似于gulp-less

    这里是网址,点击查看

    3.sass四种风格 sass编译的格式

    sass编译输出的css有四种格式

    这些样式会影响输出的css的格式

    简单介绍一下:

    css默认输出的嵌套

    ul{ font15px; li{ listnone

    ---》

    ul { font15px; } ul li { listnone; }

    紧凑compact
    在编译的时候需要执行

    sass --watch scss:css --style compact

    这个时候输出的代码就是

    ul 15px; } ul li none5px; }

    compressed 压缩
    在编译的时候需要执行

    sass --watch scss:css --style compressed

    --->

    ul15pxnoneall 0.4s}

    expanded 扩展
    更像是平时写的css一样

    在编译的时候需要执行

    sass --watch scss:css --style expanded

    --->

    ul { font15px; } ul li { listnoneall 0.3s; }

    compressed 压缩
    更像是平时写的css一样

    在编译的时候需要执行

    sass --watch scss:css --style compressed

    --->

    .100px100px1px solid redred}

    4.sass与scss sass的两个语法版本

    sass一开始用的是一种缩进式的语法格式

    采用这种格式文件的后缀名是.sass

    在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与css语法

    两个版本的区别
  • 后缀名不同 .sass和.scss
  • 语法不同,请看下面
  • 新版:

    @import "base"; @mixin alertredblue; } .alert-warning{ @include alert; } ul{ font15px; li{ listnone

    老版本:

    @import "base" =alert color:red background:blue .alert-warning +alert ul font-size:15px li list-style:none

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 3.sass的数据类型与函数 - 空一座旧城,守一个旧人

      3.sass的数据类型与函数 - 空一座旧城,守一个旧人

      2017-12-08 10:12

    • 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用 - 更爱Web-AP

      《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6

      2017-09-30 08:00

    • 【前端技术】nodejs安装扩展插件,总是报错enoent的解决方案 - 星点design

      【前端技术】nodejs安装扩展插件,总是报错enoent的解决方案 - 星点d

      2017-09-10 08:01

    • git安装 - qingqing_shi

      git安装 - qingqing_shi

      2017-08-22 18:00

    网友点评
    s