学习笔记--SASS安装及创建

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gavincz/article/details/79699266

关于SASS:

SASS 是一种 CSS 开发工具,让 CSS 的处理实现了可编程处理。

CSS 不是一个编程语言,可以用它来开发网页样式,但是没有办法用它进行编程。SASS 的出现,让 CSS 实现了通过代码编程来实现的方式。

SASS 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性,可以生成风格良好的 CSS 样式表文件,易于组织和维护。


一、SASS安装:

SASS 是 Ruby 语言开发的一个用于动态编程 CSS 文件的框架,但是学习 SASS 跟 Ruby 没有任何关系,唯一的联系就是 SASS 的运行以来 Ruby 环境,因此要在使用SASS前,必须安装 Ruby!


从Ruby 官网下载RubyInstallers地址是:http://rubyinstaller.org/downloads/ 
根据操作系统,选择相应的安装包,在此选择Ruby 2.2.2 (x64)

SASS 官网:http://sass-lang.com/

windows 安装:

    1、安装 ruby  ( sass 的依赖环境,必须安装)

    2、通过命令提示符黑窗口执行命令进行安装:

            gem install sass

          查看安装是否成功:

            gem -v   (查看Ruby 的安装完成版本号

            sass -v    (查看SASS 的安装完成版本号


一、SASS使用:

        1、创建SASS文件:

       (手动创建)

        手动创建的SASS文件(当前文件)和css文件(目标文件)所属文件夹在同一目录下,了解即可,不推荐使用

        一般,需要在项目文件夹(项目名称自己起,最好不要是中文)的根目录下手动创建SASS文件,例如:common.scss

        同时,在项目文件夹的根目录下手动创建css文件夹,例如:css

        2、建立链接关系:

                   在命令行中,执行如下命令进行编辑:

                    sass    [scss_name]   :  <targetCss_name>

                    sass       scss 文件     :  编译好的目标 css 全路径名称

例如:            sass  common.scss   :  csss/common.css

            编译结果:在指定的文件夹 css 中生成了指定的 css 样式表文件:common.css


         (自动创建)   

          自动编译命令:

          watch 命令:

                  sass --watch sass:css

使用这个命令前必须在项目文件夹中(根目录下),预先创建好sass子文件夹,即当前文件所属文件夹与目标文件所属文件夹,在同一目录下(相对路径的第三种),并在根目录下打开命令提示符输入以上命令。


        2、编译输出格式:

                默认情况下,SASS 提供了四种格式的 CSS 输入,默认情况输出是嵌套格式
                格式                  描述
                nested              嵌套—    不常用

                compact           紧凑—    常用    

                                         修改输出样式: sass --watch sass:css --style compact

                expanded         扩展—    常用    规范的 CSS 代码格式    

                                         修改输出样式: sass --watch sass:css --style expanded

                compressed      压缩—    常用   用于在线项目的小文件  

                                         修改输出样式: sass --watch sass:css --style compressed

        



猜你喜欢

转载自blog.csdn.net/gavincz/article/details/79699266