今天完成的事情

      1.task11任务介绍

基于css的更高级语言——使用less/sass重写任务4（登录页），并编译

      2.安装ruby，并搭建sass环境

      3.学习SASS基础知识

遇到的问题

      1.浏览器下载总是很慢很慢很慢，一百多兆跟我讲要三天？搞不懂哪里出了问题，最后从百度云盘下载到

1.安装ruby

安装过程没什么麻烦的地方，按提示来就可以。 安装 Ruby 时一定要勾选 Add Ruby executables to your PATH

　　进入运行cmd进入命令提示符，输入ruby -v查看版本号，如果能正确显示版本号，则说明ruby安装成功。

2.切换gem源

因为gen sources地址是国外网络地址，所以在使用的过程中，获取类会很慢，而且经常出现类库资源无法获取的问题。因此，国内开发的时候经常把源换到淘宝源，这样就用国内的镜像服务器，从而获得更加稳定、更加快速的源

1.win+R进入命令提示符工具

2.查看当前使用的源地址。

◆输入：gem sources

3.删除默认的源地址。

◆输入：gem sources -r url地址

注：默认的url地址后必须有”/”,否则删不掉。

4.添加新的源地址。

但我在网上有看到18后半年的文章中说sass的中文镜像，从淘宝交给了ruby-china，然后他的org域名挂了。

所以现在的gem源是

https://gems.ruby-china.com/

5.更新源的缓存

◆输入：gem sources -u

更新源的缓存后即完成了Ruby的gem源修改。

3.安装SASS

       输入gem install sass进行安装。

　　正常情况下显示的结果是这样的：

输入sass -v查看版本号，如果能正确显示版本号，则说明sass安装成功。

4.在vscode里安装“easy sass”安装成功后重启 VSCode。

收获

     1.什么是Sass和Less？

      Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？

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

       转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

      2.为什么要使用CSS预处理器？ 

     Js中可以自定义变量，而CSS仅仅是一个标记语言，非编程性的、描述性的语言，没有变量、函数及作用域，且不可以自定义变量，不可以引用等等。

       CSS有具体以下几个缺点：

• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

       这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。

       但是，CSS预处理器也不是万金油，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。

       所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。

      3.Sass和Less的比较

不同之处

SASS是一款强化css的辅助工具。在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，有助于更好地组织管理样式文件，以及更高效地开发项目。

注：SASS文件的使用

SASS>(编译)>css>(引用)>HTML

即不能直接引用.sass文件

       4.SASS编译方式

1.命令行编译

命令编译是指使用你电脑中的命令终端，通过手动输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：

单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

监听：

在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2.图形化工具编译

koala是一个前端预处理语言图形编译工具，支持Less,Sass,Compass,CoffeeScript.帮助web开发者更高效地使用它们进行开发，并且他可以跨平台运行，完美兼容Windows，Linux，Mac。

下载安装好软件后把scss 文件导入软件后即可执行编译;

3.自动化编译

在编程软件（VScode）中配置sass的自动编译

       5.SASS的基本规则

sass的核心思想： 不要做重复的工作。

1.sass变量，以美元符号$开头。赋值方法与属性写法一样。直接使用可以调用变量。

例如$width：5px；  body{width：$width}就赋值body宽度为5px了。如果这个数值在一个部分被大量的调用，就可以给这个变量赋值，利于以后代码的维护，更改变量值就可以统一修改所以调用这个变量的属性。

2.嵌套 
 

   同样 ：对伪类元素很友好

不仅可以标签嵌套，也可以属性嵌套。比如font全家桶有font-size；font-family；font-weight；直接

增加了代码可读性和易写性。

注：属性格式为 属性名称：{ } 标签无：

3.注释

/* */ 注释会被编译进css中。

//不会被编译进去。

如果想增加代码的可读性，但是不想在网页显示中被看到自己的注释，可以使用//注释。//注释是单行注释。

4.子选择器

article section { margin: 5px }这种写法会选 中article里所有的section标签；

 article > section { border: 1px solid #ccc }这种写法只选中article里的直接子元素为section的标签。（紧跟）

5..混合器

如果一个网站中需要大段的重用代码，可以通过SASS的混合器实现大段代码的重用。

混合器使用@mixin （迷信）定义。然后通过@include引用。混合器用起来感觉和类有些相似。类名是在html中应用的，而混合器是在样式表中用的。

6.选择器继承

extend。一个选择器可以继承另一个选择器的所有样式。要注意的是不仅会继承原本选择器的所有样式，与原本选择器有关的组合选择器样式也会被继承。例如 header a：hover{xxxx}; body继承了header的样式后，body a：hover也有同样的效果。

7.定义函数

if语句：@if的表达式返回值不是false的时候，则条件成立输出{}里的代码。

后面可以跟多个 else代码，SASS会逐条执行，如果全部失败，则执行最后else代码。

for： @for可以在限制的范围内重复输出格式。@for $var from <start> through <end>和@for $var from <start> to <end>。当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。

start和end必须是整数值。

each：@each的格式是$var in <list>  $var是变量名。 list的列表。

each会遍历列表中每一个var的项目输出结果。

while：指令重复输出格式直到不满足表达式。就像他的意思   在...期间。 

明天计划学习

       敲代码

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决