CSS、Sass、Scss,以及sass和scss的区别

css3

浏览数:170

2019-6-29

AD:资源代下载服务

1、描述

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • Sass (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。 Sass 是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目, 其后缀是.sass。
  • SCSS (Sassy CSS),一款css预处理语言,SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感,其实就和css3语法一样,其后缀名是分别为 .scss。

2、css

以下是部门常用知识点:

CSS的书写方式

    行内式:将CSS代码书写在HTML标签的style属性中。style是一个通用属性,每一个标签里面都拥有这个属性,规则:
                                                        <标签名  style=”属性:值;属性:值;”></标签名>
    嵌入式:将CSS代码嵌入到HTML文件中,嵌入式是通过HTML中的<style>标签将CSS代码嵌入到HTML网页中,规则:
                                                                    <style  type=”text/css”>
                                                                              /*书写CSS代码*/
                                                                              选择器{属性:值;属性:值;}
                                                                    </style>
   外链式:写以.css扩展名的文件,然后在<head></head>标签中使用<link />标签,将css文件链接到html文件中,规则:
                                                             <标签名  style=”属性:值;属性:值;”></标签名>

选择器

      元素选择器、id选择器、类选择器、
      属性选择器(如为带有 title 属性的所有元素设置样式 [title] {somestyles} )、
      属性和值选择器(如为带有 title="hello title" 的所有元素设置样式 [title=W3School] {somestyles} )、
      派生选择器(通过依据元素在其位置的上下文关系来定义样式),有三种
          后代选择器:    空格隔开;
          子元素选择器:  >隔开,只能选择作为某元素子元素的元素;
          相邻兄弟选择器:选择紧接在一元素后的元素,且二者有相同父元素,
                         如设置紧接 h1 后出现的 p 的字体颜色:h1 + p {color: red;};
          注1:.a,.b该逗号表示存在其中一个类的元素就设置,多元选择;
          注1:.a.b没有空格表示同时拥有两个类的元素。                           

盒子模型

       所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子,封装周围的HTML元素,
       它包括:margin(外边距)、border(边框)、padding(内边距)、content(内容)
       盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

定位

      Position属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示
      absolute: 绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。
                 定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。
      relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。
                 定位的起始位置为此元素原先在文档流的位置。
      fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置。
      static :默认值;默认布局.
      辅助属性:position属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,
               需要使用下面的属性(position:static不支持这些):
                ①left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。
                ②right :表示向元素的右边插入多少像素,使元素向左移动多少像素。
                ③top :表示向元素的上方插入多少像素,使元素向下移动多少像素。
                ④bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。
                注:上面属性的值可以为负,单位:px 。
               

布局

(省略……)

3、sass、scss、和css的关系

css预处理器

css预处理器是用一种专门的语言,进行网页的样式设计,之后在被编译为正常的css文件,以供项目使用。使用css预处理语言的好处:是css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。

css和sass的关系

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

scss和css的关系

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

sass和scss的关系

sass和scss其实是一样的css预处理语言,SCSS 是 Sass 3 引入新的语法,其后缀名是分别为 .sass和.scss两种。
SASS版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss。
两者是有不同的,继sass之后scss的编写规范基本和css一致,sass时代是有严格的缩进规范并且没有‘{}’和‘;’。
而scss则和css的规范是一致的。

示例代码

        // sass
        #sidebar
          width: 30%
          background-color: #faa
        // scss
        #sidebar {
          width: 30%;
          background-color: #faa;
        }

4、sass

直接跳过

5、scss

scss 注释

        多行注释 - 这些使用 /**/ 写入。多行注释都保留在CSS输出。
        单行注释 - 这些是使用 // 跟着注释。单行注释不会保留在CSS输出。

变量

$ 符号来标识变量;把反复使用的css属性值定义成变量;

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 变量中可存在变量

$link-color: blue;
a {
  color: $link_color; // 中划线和下划线等价,包括对混合器和Sass函数的命名
}

$side : left;
.rounded {
  border-#{$side}-radius: 5px; // 如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
}

$nav-color: #F90;// 当前样式表都可以使用
nav {
  $width: 100px; // 只有nav{}里面才可以使用,当前样式表其他地方可以重复定义和使用
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

嵌套

选择器嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

属性也可以嵌套,比如border-color属性,可以写成:
p {
    border: {   // 注意,border后面必须加上冒号。
        color: red;
    }
}

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成
a {
    &:hover { color: #ffb3ff; } }

计算功能

所有数据类型均支持相等运算 == 或 !=,此外,每种数据类型也有其各自支持的运算方式。

数字运算: 支持数字的加减乘除、取整等运算 (+, -, *, /, %)
$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;}

字符串运算: + 可用于连接字符串
注意,如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的,
相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号
p {cursor: e + -resize;} //编译后 p {cursor: e-resize; }
p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";}
// 编译为
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

代码的重用

继承

继承是基于类class的(有时是基于其他类型的选择器)
允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;}

// class2要继承class1,就要使用@extend命令:

.class2 {
     @extend .class1;
     font-size:120%;
 }

混合器 Mixin

避免不停地重复一段样式

   // 使用@mixin命令,定义一个代码块。
  @mixin left {
    float: left;
    margin-left: 10px;
  }
    //使用@include命令,调用这个mixin。
  div {
    @include left;
  }
  
  // mixin的强大之处,在于可以指定参数和缺省值。
  @mixin left($value: 10px) {
      float: left;
      margin-right: $value;
  }
    // 使用的时候,根据需要加入参数:
  div {
    @include left(20px);
  }

插入文件

Sass 拓展了
@import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,
被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

    @import "foo.scss"; //都会导入文件 foo.scss
    @import "foo"; //都会导入文件 foo.scss
    @import "http://foo.com/bar";  // 插入外部文件
    @import "foo.css"; // 等同于css的import命令。
    

高级用法

比如控制指令,条件语句、循环语句、自定义函数等,这部分就不列出来了。

scss总结

这里只是简单介绍 scss 最基本部分,使用 scss 可以编写清晰、无冗余、语义化的 css。

变量是 scss 提供的最基本的工具。通过变量可以让独立的 css 值变得可重用,无论是在一条单独的规则范围内还是在整个样式表中。

变量、混合器的命名甚至 scss 的文件名,可以互换通用_和-。

同样基础的是 scss 的嵌套机制。嵌套允许css规则内嵌套css规则,减少重复编写常用的选择器,同时让样式表的结构一眼望去更加清晰。scss同时提供了特殊的父选择器标识符 & ,通过它可以构造出更高效的嵌套。

混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。使用混合器减少重复,使用混合器让你的css变得更加可维护和语义化。

与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系,通过这些关系可以保持你的css的整洁和可维护性。

样式导入,scss 的另一个重要特性。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件,避免了项目中有大量的css文件通过原生的css @import带来的性能问题。通过嵌套导入和默认变量值,导入可以构建更强有力的、可定制的样式。

作者:老屋