发表于: 2017-03-24 22:32:14

1 650


      今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin

      了解什么是CSS 预处理器

      了解了Sass

      了解了Less

      明天计划的事情:(一定要写非常细致的内容) 

      任务11:基于css的更高级语言——使用less/sass重写任务4(登录页),并编译 

      遇到的问题:(遇到什么困难,怎么解决的)   

      收获:(通过今天的学习,学到了什么知识)

      什么是 CSS 预处理器?

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

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

      From  <http://www.imooc.com/code/5993>

       

      什么是 Sass?

      Sass 官网上是这样描述 Sass 的:

      Sass 是一门高于 CSS  的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。

        Sass  能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

       

      From  <http://www.imooc.com/code/6371>

       

      Sass 和 SCSS  有什么区别?

      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;

        }

      编译出来的  CSS

      body {

          font: 100% Helvetica,  sans-serif;

          color: #333;

        }

       

      From  <http://www.imooc.com/code/6373>

       

      Sass支持定义变量。变量以美元符号$)作为开头。变量用冒号(:赋值

      SassScript支持四种数据类型:

      • 数值(可包括单位)
      • 颜色

      变量可以用作函数的参数或返回值。在解释过程中,解释器会把变量的值写入最终的CSS文件中。

       

      From  <https://zh.wikipedia.org/wiki/Sass#.E5.8F.98.E9.87.8F>



返回列表 返回列表
评论

    分享到