`

SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

阅读更多

日期:2013-2-18  来源:GBin1.com

SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

什么是SASS?

SASS英文意思是Syntactically Awesome Stylesheets Sass,最早由Hampton Catlin开发和设计。SASS是一种帮助你简化CSS工作流程的方式,帮助你更容易的维和和开发CSS内容。

如果你不明白为什么用SASS,你可以先看看这篇文章 为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

最 简单的例子,你是不是经常需要使用“查询”和“替换”功能来修改CSS文件中某一个16进制的颜色?或者是打开一个计算器来计算多列设计中的列宽? SASS介绍了一个新的概念例如,variables,mixins,镶套或者是选择器继承。 从外形上看起来,非常像CSS,但是并没有分割号或者大括号。

看看下面这个简单的CSS:

#skyscraper_ad
{
  display: block;
  width: 120px;
  height: 600px; 
}

#leaderboard_ad 
{
  display: block;
  width: 728px;
  height: 90px; 
}

如果你需要使用SASS,则如下代码:

#skyscraper_ad
  display: block
  width: 120px
  height: 600px

#leaderboard_ad 
  display: block
  width: 728px
  height: 90px

SASS使用双空格的缩进来定义代码镶套结构。这里你可以大体的了解SASS的样子,下面我们将介绍为什么SASS如此的棒!

如果你需要更多了解SASS,可以查看这篇内容为什么需要将SASS和Compass融入CSS代码开发流程

变量

在SASS中使用美元符号定义一个变量,在这个例子里,一个美元自负,变量名字加上一个冒号定义一个变量。

........

来源:SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

分享到:
评论

相关推荐

    Beginning CSS Preprocessors(Apress,2015)

    Learn how preprocessors can make CSS scalable and easy to maintain....What are the features of Sass (Syntactically Awesome Stylesheets) What is Compass (COMPrehensive ASSembler) What is Less (Leaner SS)

    在vue项目中使用sass语法问题

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充...

    Django中如何使用sass的方法步骤

    作为一个运维开发,不像业务开发只专注后端业务开发即可,常常需要自己来构建前端的东西,当然系统交互体验说的过去就行,要求也没有业务系统...Sass or (Syntactically awesome style sheets) is a preprocessor scri

    在create-react-app中使用sass的方法示例

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言,即SassScript。Sass包括两套语法。最开始...

    初入Sass

    **Sass** (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。 Sass 是一款强化 ...

    Sass for Web Designers

    Let’s face it: CSS is hard. Our stylesheets are ... From getting started to advanced techniques, Dan will help you level up your stylesheets and instantly start taking advantage of the power of Sass.

    Sass基础教程-快速入门

    Sass基础教程-快速入门

    前端技术之Sass教程.zip

    前端技术之Sass教程.zip

    TutorialsPoint Sass教程

    TutorialsPoint Sass教程

    node-sass.zip

    【用于解决 failed Error: not found: python2 node-sass】 报错信息如下: ``` npm WARN prefer global node-gyp@3.6.0 should be installed with -g > node-sass@4.5.2 install E:\workspace_vscode\ww\node...

    vue2中使用sass并配置全局的sass样式变量的方法

    Sass语言  Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS语法。Sass有助于保持大型...

    node-sass和sass-loader下载.zip

    直接下载node-sass和sass-loader下载,然后拷贝到node-modules下即可,再次npm install就不会报错了

    sass的简介与快速入门.pptx

    sass简介:开发环境搭建、sass语法、sass继承、函数、变量等 快速入门ppt

    SASS 零基础学习案例以及安装教程

    SASS 零基础学习案例以及安装教程,SASS 零基础学习案例以及安装教程

    金融计算与建模,SASS教程

    这是关于软件sass的。这是关于一个软件的金融计算。

    java+sass+多数据源切换+实现sass系统的多租户核心代码

    此处的资源可以帮助我们完成sass系统中多租户实现功能,用以完成数据库的多数据源切换功能。

    css2sass:将CSS代码片段转换为语法很棒的StyleSheets代码

    css2sass是一个简单的sinatra应用程序,可将CSS代码段转换为语法很棒的StyleSheets代码。 受到的极大启发 用法 将CSS粘贴到第一个框中 点击转换 完毕! 原料药 json和xml。 测验 参见test/test_css2sass.rb 去做 ...

    私人sass教程附加解题过程

    私人sass教程附加解题过程

    sass简介_动力节点Java学院整理

    Sass 是Syntactically Awesome Stylesheete Sass的缩写,是由Hampton Catlin开发的。 Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易! 例如,曾几时何,因为客户的需求的变更,你必须...

    Sass学习笔记.md

    Sass学习笔记.md

Global site tag (gtag.js) - Google Analytics