当前位置: 首页 > news >正文

Sass Day-01

什么是css预处理器?
定义:

    CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

通俗的说,

  “CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。
  CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。 

其它 CSS 预处理器语言:

     Sass(SCSS)、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS
     (Sass(SCSS)、LESS、Stylus) 相对用的比较多,语言比较优秀
$color: red;
.test {
    color: $color;
}
//编译以后
.test{
   color:red;
}

什么是Sass?

    Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。
    Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

Sass 前世今生:

   Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法)并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的大力推动,还是有很多开发者选择了 Sass。
   Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。

为什么早期不如 LESS 普及?

   虽然缩进式风格可以有效缩减代码量,强制规范编码风格,但它一方面并不为大多数程序接受,另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早,但远不如 LESS 普及的原因。
$side : left;
.rounded {
    border-#{$side}-radius: 5px;
}

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点

   1.文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
   2.语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
//sass语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量

body
    font: 100% $font-stack
    color: $primary-color

//scss语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

//编译后
body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

SCSS 和 CSS 写法无差别:

   SCSS 和 CSS 写法无差别,这也是 Sass 后来越来越受大众喜欢原因之一。
   简单点说,把你现有的“.css”文件直接修改成“.scss”即可使用。

相关文章:

  • 和菜鸟一起学linux总线驱动之初识smartcard操作过程
  • 日记(docker)
  • 浅谈使用Fiddler工具发送post请求(带有json数据)以及get请求(Header方式传参)(Header方式传参)...
  • Windows 8 微软官方 MSDN版 下载
  • Microsoft Power BI Desktop概念学习系列之Microsoft Power BI Desktop是什么?
  • 各种数据库的注入方法
  • git小技巧
  • 如何让ssh连接服务器或者sshtunnel保持连接呢?
  • 自从有了暴风AI无屏电视Real6,我想撤回所有买过的电视……
  • C/C++内存泄露及其检测工具
  • Silverlight缩略图生成(使用WriteableBitmap类)
  • 图像处理滤波应用(Halcon)
  • SQL快速查找
  • 21-Heartbeat配置文件authkey重要参数讲解
  • 手机不可以上网
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 2017前端实习生面试总结
  • CAP 一致性协议及应用解析
  • Java 23种设计模式 之单例模式 7种实现方式
  • JavaScript对象详解
  • JWT究竟是什么呢?
  • k个最大的数及变种小结
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • Rancher-k8s加速安装文档
  • SpiderData 2019年2月23日 DApp数据排行榜
  • uva 10370 Above Average
  • 编写符合Python风格的对象
  • 新版博客前端前瞻
  • 职业生涯 一个六年开发经验的女程序员的心声。
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • #{}和${}的区别是什么 -- java面试
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (转)h264中avc和flv数据的解析
  • .bat批处理(六):替换字符串中匹配的子串
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .NET CORE 3.1 集成JWT鉴权和授权2
  • .net core开源商城系统源码,支持可视化布局小程序
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .net 按比例显示图片的缩略图
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)
  • .Net程序帮助文档制作
  • .NET国产化改造探索(一)、VMware安装银河麒麟
  • @data注解_一枚 架构师 也不会用的Lombok注解,相见恨晚
  • [ CTF ] WriteUp-2022年春秋杯网络安全联赛-冬季赛
  • [Android学习笔记]ScrollView的使用
  • [CF226E]Noble Knight's Path
  • [DL]深度学习_Feature Pyramid Network
  • [Docker]四.Docker部署nodejs项目,部署Mysql,部署Redis,部署Mongodb
  • [LeetCode] Sort List
  • [LeetCode]—Roman to Integer 罗马数字转阿拉伯数字
  • [Open3d]: 知识记录
  • [Redis]Redis高级特性的配置及使用
  • [SoapUI] 通过Groovy写文本文件