今天完成的事情：今天提交了任务10，完成了任务11，接受了任务12，了解了sass的基本用法及代码规范，知道了

@mixin

@include

@extend

$

@import

的用法

明天计划的事情：明天计划完成任务12，用sass规范任务5和任务6的代码
遇到的问题：

       1，刚接触sass的时候完全找不到门路，自己看了开发者文档，对于 @mixin,$,@include,@extend,的用法自己已经学会运用了，但是对于@import这个属性自己还不是很了解，后来师兄给我又发了网址，

【链接】SASS用法指南

http://www.ruanyifeng.com/blog/2012/06/sass.html

【链接】sass使用入门教程

https://www.cnblogs.com/morong/p/4329957.html

着重了解了下@import的用法，后来又通过bilibili咱们自己上传的视频

IT 修真院: 前端开发 css-task-12-sass （https://www.bilibili.com/video/av13765441）

对于各个属性又了解了一遍算是对于这个有了深刻的了解

收获：通过今天的学习与了解，了解了sass中属性一些常用属性的使用，可以说算是节省了自己写重复代码的时间，

任务10总结

任务耗时4天

总结   任务10的话首先第一个难点就是其中进度条的hover效果的应用，因为点击进度条的话首先需要保证进度条，中间圆圈以及下边文字都改变自身颜色，这方面布局的话要布置好，另外一个难点就是input点击框，首先默认点击样式的需要改变，这个网上可以找到教程，另外一个就是一组input只能点击一个，这个是由其中的name属性来控制的。

1. 如何改变默认 radio 和 select 的样式？

改变默认 radio 样式的话可以参考这个

【链接】自定义input[type="radio"]的样式

https://www.cnblogs.com/xinjie-just/p/5911086.html

改变默认select  样式的话可以参考这个

https://www.cnblogs.com/love540376/p/4932868.html

2. 自适应小屏幕设备时，该如何布局？ 

首先自适应布局的话页面顶部部分应该添加

<meta name="viewport" content="width=device-width, initial-scale=1">

这行代码，另外就是涉及到长度单位的话精良不要使用px,em这些是，尽量使用rem。另外就是关于换行或者其他效果的话，可以使用媒体查询来实现这种结果。

任务11总结

任务耗时1天

总结任务11的话是用sass重新写一遍任务4，这个相对来说没什么太大的难度，但是难就难在对于sass其中一些属性的运用，因为使用sass的目的应该是为了自己以后写代码应该更加方便，所以其中一些经常用到的语法应该尽快掌握，对于以后自己代码的质量或者说时间也会又一个相对的提高

1. 如何使用 less?  

浏览器端直接使用 Less，需要一个脚本的支持，这个脚本就是 Less.js，可以在浏览器端把 .less 文件解析成 CSS 样式。可以从 http://Lesscss.org 下载最新版本的 Less.js。

1. <link rel="stylesheet/less" type="text/css" href="styles.less">

1. <script src="Less.js" type="text/javascript"></script>

把这两行代码添加到页头

命令行用法：

1. $ Lessc styles.less

上面的命令会将编译后的 CSS 输出到 stdout。如果希望将 CSS 代码保存到指定的文件中，就可以使用以下命令：

1. $ Lessc styles.less styles.css

上述命令就会将 styles.less 文件编译后的 CSS 代码保存到 styles.css 文件中。如何你希望编译后得到压缩的 CSS，只需提供一个 -x 参数就可以了。命令如下：

1. $ Lessc styles.less styles.css -x

2. 如何使用 sass?

      1，window 下安装 SASS 首先需要安装Ruby，先从官网下载 Ruby 并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量

     2，Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass

gem install sass 

gem install compass

安装完成是直接在webstrom里新建scss文件就行了。软件会提示你进行自动编译

3.less 和 sass 有什么区别？

sass 和 less 主要区别: 在于实现方式 less 是基于 JavaScript 的在客户端处理 所以安装的时候用 npm，sass 是基于 ruby 所以在服务器处理

Sass 和 LESS 语法较为严谨、严密，而 Stylus 语法相对散漫，其中 LESS 学习起来更快一些，因为他更像 CSS 的标准；sass 和 LESS 相互影响较大，其中 Sass 受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS；

4. 如何使用 gulp 编辑 less？ 

1，在项目目录中创建 package.json

2，通过 gulp 和插件 gulp-less 执行编译 less 文件的任务

在项目目录下，在命令行执行 npm install gulp-less –save-dev 命令，会在项目中安装 gulp-less 插件。在项目目录中创建你需要编译的 less 文件（例如项目目录中 css/index.less 文件）。 通过 gulp 执行任务之前需要配置执行任务的文件，在项目目录中创建 gulpfile.js 文件，文件内容如下，gulp 通过该配置执行任务。最后在项目目录下通过命令行执行 gulp 就会执行编译 less 文件的任务了（也可以执行 gulp 任务名）。得到类似如下结果