SCSS-1的简单介绍

2019-01-13 本文已影响9人学的会的前端

前期准备

Sass中文档：学习参考手册
软件安装：VScode，ruby，node.js， npm，yarn。

软件使用：

最开始使用及配置：
利用终端先创建一个文件夹，之后把文件夹拖入vscode
我创建的是SCSSDEMO1文件

TIM图片20190113143444.png
使用箭头所指图标，创建文件

TIM图片20190113143543.png
创建好两个文件，一个.html文件，一个.scss文件

TIM图片20190113143808.png
在.html文件中写!之后按tab键。

TIM图片20190113144032.png
在1.scss中写入类CSS样式，刚开始加载是没有效果的。
点击view-terminal进入终端

TIM图片20190113144222.png
利用http-server . -c-1获取http协议，在浏览器上预览。
TIM图片20190113145320.png
要想样.scss文件中的样式生效，一定要先安装parcel，安装步骤

npm init -y
npm i -D parcel
如果安装过程出错，百度错误处理方法

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。
之后利用命令行npx parcel index.html就可以把.scss转换成css。
TIM图片20190113145219.png
利用这个命令行会得到http协议，利用网址预览就可以了。
TIM图片20190113150856.png
一定要先安装parcel，是http-server . -c-1中间有一个.和Gitbase的不一样。一定要在.html文件中引入.scss文件。
html文件中引入scss文件
<link rel = "stylesheet" href = "./1.scss">

Sass特色：

完全兼容 CSS3
在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
对颜色和其它值进行操作的{Sass::Script::Functions 函数}
函数库控制指令之类的高级功能
良好的格式，可对输出格式进行定制
支持 Firebug

Scss和Sass的区别：

Sass（英文全称：Syntactically Awesome Stylesheets）
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配 Compass 样式库一同使用时。
优点：

兼容 CSS 语法：Sass 完全兼容各个版本的 CSS 语法，对语法兼容的把控严格，可以放心的使用任何现有的 CSS 库。
功能丰富：Sass 比其他 CSS 扩展语言具有更多的功能和特性。Sass 虽然一直被追赶，但从未被超越。
稳定成熟：Sass2007年发表，2016年成熟。
久经考验：多次实验证明，Sass 是业界的首选 CSS 扩展语言。
广泛的社区：数家企业和数百位开发者在为 Sass 提供支持。
前端框架的基石：无数前端框架由 Sass 构建：Compass、Bourbon 和 Susy 等。

Scss（Sassy CSS）的介绍：
Scss 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法。
Sass的语法：
Sass 有两种语法：第一种被称为 SCSS (Sassy CSS)；第二种比较老的语法称为缩排语法（或者就称为 "Sass"），提供了一种更简洁的 CSS 书写方式。
使用：
Sass 有三种使用方式：命令行工具、独立的 Ruby 模块，以及包含 Ruby on Rails 和 Merb 作为支持 Rack 的框架的插件。

Sass不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，而且也不使用分号，而是用换行符来分隔属性。

#sidebar
  width: 30%
  background-color: #faa

SCSS 需要使用分号和花括号而不是换行和缩进。

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

SCSS 对空白符号不敏感，所以以上代码也可以写成下面的形式：

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

任一语法都可以导入另一种语法撰写的文件中。只要使用 sass-convert 命令行工具，就可以将一种语法转换为另一种语法：

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

sass-嵌套选择器:选择器里面在写选择器，和顺序无关

.nav {
    border: 1px solid green;
    > ul {
        background: white;
        >li {
            border: 1px solid red;
        }
    }
}

sass-变量:便于修改，还可以使不同的变量是同一个值。

$grey: #666;
$gray: $grey;
.nav {
    border: 1px solid $gray;
    > ul {
        background: white;
        >li {
            border: 1px solid $grey;
        }
    }
}

sass-mixin:设置@mixin debug(可以为空){} ----引用@include debug(){}

简单用法

$border-width: 1px;
@mixin debug {
    border: 1px solid red;
    background: $grey;//可以添加多个样式
}
.nav {
    @include debug;
    > ul {
        background: white;
        >li {
            @include debug;
        }
    }
}

高级用法：mixin可以认为是一个函数，可以传递一个参数

@mixin debug($border-color) {
    border: 1px solid $border-color;
    background: $grey;
}
.nav {
    @include debug(red);
    > ul {
        background: white;
        >li {
            @include debug(green);//传递的参数不同
        }
    }
}

还可以给一个默认值。比如说默认是红色

@mixin debug($border-color:red) {
    border: 1px solid $border-color;
    background: $grey;
}
.nav {
    @include debug;//有传入的默认red。
    > ul {
        background: white;
        >li {
            @include debug(green);
        }
    }
}

%---placeholder：设置%box{}---引用@extend %box;

不拷贝样式，只是把选择器移到代码的前面

  <div class="nav">
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
      </ul>
  </div>
  <div class="demo"></div>

若果想让demo和nav有相同的样式，可以采用mixin方法，但是实际只是减少了手写代码，CSS解析时没有减少

@mixin box {
    box-shadow: 0 0 3px black;
            margin: 10px;
            background: white;
            border-radius: 10px;
}
.nav {
   
    > ul {
        background: white;
        border: $grey;
        >li {
            @include box;
        }
    }
}
.demo{
    width: 100px;
    height: 100px;
    @include box;
}

TIM图片20190112210634.png

所以可以采用以下方法：

%box {
    box-shadow: 0 0 3px black;
            margin: 10px;
            background: white;
            border-radius: 10px;
}
.nav {
    > ul {
        background: white;
        border: $grey;
        >li {
            @extend %box;
        }
    }
}
.demo{
    width: 100px;
    height: 100px;
    @extend %box;
}

通过这种方法。CSS只是解析了一次

TIM图片20190112210931.png

@mixin和%（placeholder）的区别：

@mixin可以传递参数，而%不行；
@mixin的调用方式是@include，而%的调用方式是@extend；
@include产生的样式是以复制拷贝的方式存在的，而@extend产生的样式是以组合申明的方式存在的。

SCSS-1的简单介绍

前期准备

软件使用：

Sass特色：

Scss和Sass的区别：

sass-嵌套选择器:选择器里面在写选择器，和顺序无关

sass-变量:便于修改，还可以使不同的变量是同一个值。

sass-mixin:设置@mixin debug(可以为空){} ----引用@include debug(){}

%---placeholder：设置%box{}---引用@extend %box;

@mixin和%（placeholder）的区别：

猜你喜欢

热点阅读