第一章:sass的简单介绍

178 阅读3分钟

封面图

LibSass 是Sass引擎的c语言部分。

基于LibSass,sass.js是一个纯粹的用js扩展的Sass引擎。它可以使我们能够用JavaScript编写Sass代码并运行Sass。

sass-node是基于NodeJs的解释器,可以让我们在node环境中编译sass。

sass的安装

sass是用ruby写的,所以需要我们先安装ruby。

sudo apt-get install ruby-full

然后我们安装sass

gem install sass

安装过程如下:

image.png

我们可以查看一下版本

 sass -v

还可以查看相关的使用帮助:

 sass -h

Compass

Compass是一个开源的框架。可以帮助我们用sass编写重用性和扩展性高的CSS代码。同时也可以补充代码的前缀,使我们的代码有更好的兼容性。

安装Compass:

gem install compass

完成之后,我们可以创建一个项目。

compass create project

项目结构如下:

config.rb文件包含了该项目的配置。

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

执行编译命令后,会将sass文件编译为css文件。

compass compile

sass 交互模式

执行下面的命令进入交互模式

sass --interactive

同时,内置的函数也会进行计算

scss 可以转换为 sass

我们都写过sass代码。其实scss更新,更加类似css语法。他们两者之有些差异。

sass-convert test.scss test.sass

test.scss

/*Sassy CSS(SCSS)语法*/
p {
    color: red;
}

test.sass

/*缩进语法*/
p
  color: red

看到两者之间的差别了吗?

目前,有两种可用的语法:

  • 原始的缩进语法,大多数称为Sass,
  • 以及较新的Sassy CSS(SCSS)语法,它是CSS3的扩展。

编译的时候,编译器通过识别后缀选择用那种语法进行编译。

选择输出格式

当我们把sass编译成css时,我们可以选择输出的格式。

  • expanded
  • nested
  • compacted
  • compressed

默认是nested。

简单看个例子:

test.scss

$base-color:blue;
$link-color:orange;
$hover-color:red;

p{
    color:$base-color;
    a {
        color: $link-color;
        &:hover{
           color:  $hover-color;
        }
    }
}

选择expanded格式:

sass --style expanded test.scss

如下:

选择nested格式:

sass --style nested test.scss

选择compacted格式:

sass --style compacted test.scss

选择compressed格式:

sass --style compressed test.scss

使用 partials

当我们项目代码逐渐多起来的时候,我们不可能把所有的代码都放到一个文件里。我们会选择一些代码拆分的方法。

partials 是一些特殊的scss文件,可以导入到项目里,但是自身又不会编译到css中。

举个例子,有如下文件:

_grid.scss

.row{
    width: 100%;
}

main.scss

@import 'layouts/_grid.scss';

// scss-lint:disabled PlaceholderExtend
section.custom {
    @extend .row;
}

编译后结果

/* line 1, ../sass/layouts/_grid.scss */
.row, section.custom {
  width: 100%;
}

grid.scss并没有编译到css 中。

原因

带有下划线的scss文件通常叫做partials,它们不会被编译到css中去,但是它们可以导入到其他文件中。

这个方法对于我们编写重用行高的代码非常有效。同时也可以用来做代码拆分。

需要注意的一点是,导入的import写法不带ur。

正确

@import 'layouts/_grid.scss';

错误

@import url('layouts/_grid.scss');

最后

  • 公众号《JavaScript高级程序设计》
  • 公众号内回复”vue-router“ 或 ”router“即可收到 VueRouter源码分析的文档。
  • 回复”vuex“ 或 ”Vuex“即可收到 Vuex 源码分析的文档。

全文完,如果喜欢。

请点赞和"在看"吧,最好也加个"关注",或者分享到朋友圈。