首页 > 代码库 > Jekyll中Sass的使用

Jekyll中Sass的使用

  • 文章最初发表于szhshp的第三边境研究所
    转载请注明

    Jekyll中Sass的使用

    什么是Sass

    Sass是一群超级懒的人创造的Css快速编程工具

    Sass(Syntactically Awesome Style Sheets)是一个相对新的编程语言,Sass为web前端开发而生,可以用它来定义一套新的语法规则和函数,以加强和提升CSS。通过这种新的编程语言,你可以使用最高效的方式,以少量的代码创建复杂的设计。它改进并增强了CSS的能力,增加了变量,局部和函数这些特性。

    关于Sass的优势

    1. Sass的嵌套可以将多层级的Css badcode 显得跟简练
    2. Sass的变量可以统一控制设计风格
    3. Sass的@import等导入方法可以实现设计模块化分离
    4. Sass比Css好玩

    Usage

    Install Sass

    Jekyll 3 已经自带Sass编译器了, 不需要额外安装

    Config

    在项目里新建一个文件夹_sass, 当然也可以用其他名字, 之后可以进行设置, 然后将实际.scss放到里面

    jekyll-project/
    ├── _includes/
    ├── _layouts/
    ├── _posts/
    └── _sass/
    │   └── styles.scss
    ├── _config.yml
    └── index.html

    修改_config.yml以开启sass:

    sass:
        sass_dir: _sass
        style: compressed

    这里可以设置sass的默认路径

    Create a Sass stylesheet

    在自己的CSS文件夹下创建一个.scss, 里面只放一行:

    ---
    ---
    
    // Imports
    @import "style";

    项目路径:

    jekyll-project/
    ├── _includes/
    ├── _layouts/
    ├── _posts/
    └── _sass/
    │   └── styles.scss
    └── css/
    │   └── styles.scss
    ├── _config.yml
    └── index.html

    注意:最顶上的两行横杠不能删除, 这个是为了让文件按照Jekyll标准进行读取

    include stylesheet to html

    html照常使用css

    <li*nk rel="stylesheet" href=http://www.mamicode.com/"/css/styles.css">

    最后文件会被自动转换成.css因此只需要引用.css即可

    项目实例

    直接看官方项目吧: https://github.com/jekyll/jekyll-sass-converter

    参考文献

    • Using Sass with Jekyll
    • Jekyll Docs
    • How to use Sass with Jekyll (Bootstrap and Font Awesome example)
    • i-am-a-jekyll-god

Jekyll中Sass的使用