文档章节

sass安装、创建工程

heartless01
 heartless01
发布于 2017/08/24 14:54
字数 471
阅读 10
收藏 0

1.安装sass

    1.1ruby安装

因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby

在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境

ruby install

    1.2sass安装

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

然后直接在命令行中输入

gem install sass
gem install compass
如果报错,安装到最后失败,输入下段代码
gem install compass -v 1.0.1 

查看sass版本的命令行为

sass -v
compass -v

安装成功

tip:Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配Compass,它才能显出真正的威力。

2.创建工程

1.创建一个《public》文件夹用来装“css”与“sass”

2.创建sass

    2.1cmd打开 找到所在位置《public》输入  

compass create --bare --sass-dir "sass" --css-dir "css" --images-dir "img" --javascripts-dir "js"

    会在指定文件夹下面使用命令行创建,会创建出三个文件(sass stylesheets config.rb)

    2.2编译sass

       2.2.1在《sass》内创建一个 .scss 的文件如(main.scss)

       2.2.2 在cmd 进入sass文件夹下,输入

sass --style compressed main.scss main.css

tip:

        这个时候会生成css文件夹与sass同级

       2.3监听

        监听

        监听前,cmd的路径应该是在有config.rb的文件夹(否则监听失败)

compass watch

       tip:监听成功,但是cmd千万不能关闭

              关闭的时候,ctrl+c , 输入Y,center,关闭compass监听

 

      tip:还有一种监听方式

                1.sass --watch <sass file>:<css file> 例如:sass --watch main.scss:main.css

测试一下是否监听成功

 

若失败报错

incompatible character encodings: GBK and UTF-8?

查看路径中是否包含中文名

 

 

部分引入SASS用法指南

 

 

© 著作权归作者所有

上一篇: 前端框架
heartless01
粉丝 0
博文 56
码字总数 14843
作品 0
浦东
前端工程师
私信 提问
从搭建vue-脚手架到掌握webpack配置(一.基础配置)

前言 学习vue的过程肯定会接触到vue的单文件组件,进而接触到vue-cli(vue工程构建的脚手架工具),但是vue-cli创建的工程对初学者很不友好,创建的项目又太过简单和片面。 本教程会分几篇文章...

JasonWild
2018/01/08
0
0
「续集」Sass简易指南:多风格编译和运行以及文件注释

1.使用Compass创建工程 一般情况下可以在编辑器中直接创建Sass或者Scss文件。如果项目比较复杂那么我们可以使用Compass创建工程,命令如下: compass create 这样创建出的项目会自带几个文件夹...

GeCoder
2018/04/24
0
0
mpvue小程序开发中配置less支持

问题 开发小程序选定了mpvue框架后,然后是选择理想的小程序组件库,我选择的是Vant Weapp。但是,在Vant Weapp组件毕竟也是有限的,实际问题可能复杂得多。因此,把Vant Weapp组件与小程序原...

googlingman
03/05
0
0
关于搭建fis3 工程的过程记录

安装node 版本为 v6.4 切换淘宝源 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装node-sass: cnpm install --save-dev node-sass 安装fis3: cnpm install -g fis3 安......

IT追寻者
2017/11/02
0
0
Sass开发环境的配置

创建运行Sass的环境 ruby安装 因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,...

ybyron
2016/09/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
16
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
10
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
14
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
17
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部