SCSS 初级使用

最新推荐文章于 2025-03-31 11:28:57 发布

转载最新推荐文章于 2025-03-31 11:28:57 发布 · 2.1k 阅读

标签

#css #sass

收录于

html/css 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在Windows及Linux系统上安装Ruby，并通过更换gem源来优化安装过程。此外，还提供了使用Compass创建Sass项目的步骤，包括项目创建、配置参数设置以及如何监听SCSS文件变化自动编译。

安装 ruby

On Windows machines, you can use RubyInstaller

NOTE: Centos install gem, run sudo yum install ruby-rdoc ruby-devel
```
yum install rubygems
```

替换 gem 镜像源 (ruby.taobao.org)

gem sources -l
gem sources -r http://rubygems.org/
gem sources -a http://ruby.taobao.org/
gem sources -c

安装compass,在命令行中输入
```
gem install compass
```

创建测试项目 'myproject'

compass create myproject --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "images"

进入到 'myproject' 目录, 并打开 config.rb 文件。列出了常用的配置参数:

http_path = "/"
css_dir = "css" #生成的css目录
sass_dir = "sass" #需要编译的scss目录
images_dir = "images" #需要编译的图片目录
javascripts_dir = "js" #js目录,没什么用
output_style = :expanded #(:nested、:compact和:compressed)
line_comments = false;#是否生成注释
#environment = :development  #（:production或者:development），智能判断编译模式。

新建一个test.scss文件，然后输入以下命令就可以一边编译一边生成css文件了

【ps:记得在当前窗口运行命令，否则会找不到 config.rb 配置文件】
```
compass watch
```
Linux, osx 用户可用这个脚本启用后台监听程序: sass-watch
scss语法文档