来自 软件资讯 2019-11-08 03:31 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

还有风格

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命令来配置源,先移除暗许的 install sass了

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】
$ 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有多种格式

  • nested 嵌套
  • compact 紧凑
  • expanded 扩展
  • compressed 压缩

这几个样式会影响输出的css的格式

简短介绍一下:

css暗中认可输出的嵌套

ul{
    font-size:15px;
    li{
        list-style:none;
    }
}

---》

ul {
  font-size: 15px; }
  ul li {
    list-style: none; }

紧凑compact
在编写翻译的时候要求进行

sass --watch scss:css --style compact

其不时候输出的代码就是

ul { font-size: 15px; }
ul li { list-style: none; padding: 5px; }

compressed 压缩
在编写翻译的时候需求进行

sass --watch scss:css --style compressed

--->

ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}

expanded 扩展
更疑似经常写的css相仿

在编写翻译的时候须求举行

sass --watch scss:css --style expanded

--->

ul {
  font-size: 15px;
}
ul li {
  list-style: none;
  animation: all 0.3s;
}

compressed 压缩
更疑似经常写的css相像

在编写翻译的时候需求进行

sass --watch scss:css --style compressed

--->

.a{width:100px;height:100px;border:1px solid red}.a .b{background:red}

4.sass与scss

sass的八个语法版本

sass一起头用的是朝气蓬勃种缩进式的语法格式

行使这种格式文件的后缀名是.sass

在sass3.0版本后大家常用的是sassy css语法,扩充名是.scss,更好似与css语法

多少个本子的差异

  • 后缀名差别 .sass和.scss
  • 语法区别,请看上边

新版:

/*新版本
多行文本注释*/

//新版本
//单行文本注释

@import "base";

@mixin alert{
    color:red;
    background:blue;
}

.alert-warning{
    @include alert;
}

ul{
    font-size:15px;
    li{
        list-style:none;
    }
}

老版本:

/*新版本
多行文本注释

//新版本
  单行文本注释*/

@import "base"

=alert
    color:red
    background:blue


.alert-warning
    +alert


ul
    font-size:15px
    li
        list-style:none

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:还有风格

关键词: