SASS——入门

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

一:什么是css预处理器?

1.概念:用一种专门的编程语言,进行web页面样式设计,为css增加一些编程特性,将css作为目标生成文件,开发者使用这门语言进行编码工作。
2.作用:适应性强、可读性更高、易于代码维护。
3.其他同类型css预处理器:LESS、stylus等

二:SASS安装

  • 因为SASS依赖于ruby环境,所以先下载安装ruby:ruby官网
    注意在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量
  • 安装完成后cmd命令行输入ruby -v ,如下说明ruby安装成功
    这里写图片描述
  • 命令行中输入gem install sass 完成安装
    这里写图片描述
  • 常用命令:
    更新gem updata sass
    卸载gem uninstall sass

三:SASS编译

1.方式
- 命令编译
- GUI工具编译
- 自动化工具编译

2.方式:命令编译
(1).单文件编译:SASS <要编译的sass文件路径>/xxx.scss:<要输出的css路径>/xxx.css
(2).多文件编译:SASS sass/:css /
(3).缺点:一次性编译,每次保存”.scss”文件都得重新执行一次这样的命令
解决办法:开启“watch”功能(自动检测代码修改,并编译出来)

sass --watch
sass/xxx.scss:css/xxx.css

四:SASS不同样式风格的输出方法

  • 嵌套输出方式 nested
  • 展开输出方式 expanded
  • 紧凑输出方式 compact
  • 压缩输出方式 compressed

    后面的博客继续记录输出方法。。。。。。。

阅读更多

没有更多推荐了,返回首页