SCSS 初级使用

  1. 安装 ruby

    On Windows machines, you can use RubyInstaller

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

    yum install rubygems
    
  2. 替换 gem 镜像源 (ruby.taobao.org)

    gem sources -l
    gem sources -r http://rubygems.org/
    gem sources -a http://ruby.taobao.org/
    gem sources -c
    
  3. 安装compass,在命令行中输入

    gem install compass
    
  4. 创建测试项目 'myproject'

    compass create myproject --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "images"
    
  5. 进入到 '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),智能判断编译模式。
    
  6. 新建一个test.scss文件,然后输入以下命令就可以一边编译一边生成css文件了

    【ps:记得在当前窗口运行命令,否则会找不到 config.rb 配置文件】

    compass watch
    

    Linux, osx 用户可用这个脚本启用后台监听程序: sass-watch

  7. scss语法文档


基本语法入门教程:http://www.w3cplus.com/sassguide/



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值