SASS——入门

原创 2018年04月15日 15:23:10

一:什么是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

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

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

最详细的 Sass 基础教程指南

这几天一直都在研究 Sass/Scss,这次就把 Sass 基础使用方法整理发表出来。让想学习这方面知识的朋友可以多一份参考资料。毕竟现在这方面的资料特别的稀缺。...
  • chase_sky
  • chase_sky
  • 2017-06-28 08:32:08
  • 945

PostCSS入门:Sass用户入门指南

这篇教程为Sass用户提供了(我认为是)一个优秀的基本配置,让你能够容易地尝试PostCSS并在以后去深入细节...
  • LuviaWu
  • LuviaWu
  • 2017-04-19 15:31:19
  • 730

Sass&Compass快速入门总结

什么是Sass?Sass是CSS预处理器的一种,其他还有less,stylus。他们的作用相同,但是语法,功能上略有差异,经过了解。我发现less相对来说更易上手,但我还是选择了功能更为强大,语法种类...
  • Creabine
  • Creabine
  • 2016-06-22 11:26:49
  • 1894

Sass基础入门与实践提升视频课程

本课程从最基础的sass概述讲起,深入浅出地介绍sass的产生背景、编译方式、基本语法,通过实践页面的开发,全面介绍了如何使用sass结合开发工具,实现编写sass代码的过程。
  • 2017年11月06日 21:27

sass系列之 - sass 从脚开始(入门,多图)

上篇文章给大家讲解了一下sass的配置,那么接下来,就让我们一起体验一下sass这个有趣的东西。 在上篇博客中,我们安装了一个叫compass的东西,这个东西是基于sass的一个库。相当于jQuer...
  • Deep_sleeper
  • Deep_sleeper
  • 2018-01-19 15:29:26
  • 90

【Sass】SASS入门

SASS入门级教程
  • sds15732622190
  • sds15732622190
  • 2017-01-22 13:43:46
  • 402

Gulp入门之自动化构建Sass

第一步,安装gulp本机是windows平台,以windows平台为例 Mac 用户需要用 sudo npm install gulp -g-g 表示全局安装新建一个工程首先创建一个文件packag...
  • sinat_25127047
  • sinat_25127047
  • 2016-05-21 11:16:34
  • 7969

node-sass编译scss文件`@charset utf-8`报错的解决办法

gulp-sass设置编码@charset 'utf-8' 报错的解决方案
  • bomess
  • bomess
  • 2016-03-07 11:50:21
  • 4853

Sass入门

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同...
  • u012755393
  • u012755393
  • 2016-09-07 21:08:39
  • 154

sass入门

参考资料 Sass: Syntactically Awesome Style Sheets, is the most mature, stable, and powerful professiona...
  • sysuzjz
  • sysuzjz
  • 2015-10-16 13:10:14
  • 517
收藏助手
不良信息举报
您举报文章:SASS——入门
举报原因:
原因补充:

(最多只允许输入30个字)