首页 > 课程库 > 利用Sass编写高质量CSS
利用Sass编写高质量CSS

利用Sass编写高质量CSS

这是一门CSS相关的进阶教程,目标是让你把知识从“会用”变成“用好”,让你从“会写代码”过渡到“会写高质量代码”。

Web前端开发

18章节|18823次播放

查看课程视频学习交流群
486792092

8小时学习时长
更全面的职业课程大纲立即查看
  • css学习

    学习路线

    课程介绍这不是一个CSS教学过程,但会有部分CSS的讲解将为大家展示Sass编写CSS的便捷性和可维护性学习对象1、有CSS基础(Sass基于CSS),最好是HTML+CSS+JS基础(Sass具有编程语言的特点)2、对前端有兴趣,希望编写出高质量的CSS代码3、喜欢尝试新技术带来的便利性培训目标1... 查看原文

  • css学习

    Sass简介

    为什么需要CSS预处理器?对一般的项目直接用CSS就可以完成,但是对于一些大项目,这个时候如果单纯的写CSS相对复杂而且不太好维护。为什么使用Sass?使用变量自动转换RGBA颜色值忘记浏览器前缀嵌套规则media query更简单自动压缩CSS什么是Sasshttp://sass-lang.com... 查看原文

  • css学习

    Compass简介

    什么是CompassCompass是Sass的工具库在Sass的基础上封装了一系列有用的模块和模板,补充Sass的功能Compass与Sass的关系类似于jQucry与javaScript的关系Sass与Compass能做什么使用变量自动转换RGBA颜色忘记浏览器前缀嵌套规则Media query更... 查看原文

  • css学习

    Sass,Less与Stylus

    背景Sass:Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不... 查看原文

  • css学习

    命令行与注释

    Sass基础1.创建工程使用Sass创建利用Compass创建工程:打开指定目录的控制台窗口,输出指令“copmpass create”即可创建。同时,可以带参数创建:compass create --bare --sass-dir "sass" --css-dir "css" --images-d... 查看原文

  • css学习

    变量与导入

    Sass变量1.局部变量2.全局变量$color: red !global;3.变量默认值$color: red !default;4.多值变量$colors: red blue green;color: nth($colors, 1); $map: (key1:value1, key2:value... 查看原文

  • css学习

    继承与嵌套

    嵌套1.选择器嵌套2.属性嵌套3.&--引用父选择器4.@at-root,跳出嵌套默认@at-root只会跳出选择器嵌套,而不能跳出@media或@support,如果要跳出这两种,则需使用@at-root (without: media),@at-root (without: support)。这... 查看原文

  • css学习

    数据类型与mixin

    数据类型1.Number http://sass-lang.com/documentation/Sass/Script/Functions.html#number_functions2.Stringhttp://sass-lang.com/documentation/Sass/Script/Func... 查看原文

  • css学习

    函数与调试

    内置函数1. http://sass-lang.com/documentation/Sass/Script/Functions.html2. rgb(),rgba()3. lighten(),darken()4. str-length(),str-index()自定义函数@debug、@warn、@... 查看原文

  • css学习

    条件控制

    @if1.三目运算@if($condition, $condition_true, $condition_false)2. @if...@else if...@else@for@for $i from 1 through 5 {  .span#{$i} { width: 20% * $i; }}@w... 查看原文

  • css学习

    基础项目结构

    以下实战以Sass官网为例基础项目结构1.base2.components3.helpers(1)variables(2)functions(3)mixins4.layout(1)header(2)footer5.pages(1)home(2)about(3)……6.themes课后任务搭建Sass... 查看原文

  • css学习

    自动化构建

    自动化构建1. gulp构建工具2. gulp-compasshttps://www.npmjs.com/package/gulp-compass3. browser-sync 4. Css3:linear-gradient()https://developer.mozilla.org/en-US/... 查看原文

  • css学习

    网站首页布局

    网站首页布局1.reset2.normalized(1)html5(2)base(3)links(4)typography(5)embeds(6)groups(7)forms(8)tables3.susy4.breakpoint5.页面Layout代码部分<!DOCTYPE html><html> ... 查看原文

  • css学习

    网站首页实现

    网站首页的实现一.reset二.normalized(1)html5(2)base(3)links(4)typography(5)embeds(6)groups(7)forms(8)tables代码部分<!DOCTYPE html><html>  <head>    <meta charset="u... 查看原文

  • css学习

    网站公共组件实现

    公共组件1.alert2.banner3.page-header4.section-bottom5.contentinfo代码部分.banner{margin;0;@include padding-leader(0.5);.size-brand{@include span(3);text-align... 查看原文

  • css学习

    网站内容页实现

    通用布局避免多层嵌套代码部分<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta content="IE=edge" http-equiv="X-UA-Compatible">     <title>Sas... 查看原文

  • css学习

    网站响应式布局

    屏幕尺寸1.<7682.>=7683.>=9924.>=1200代码部分<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta content="IE=edge" http-equiv="X-UA-Compat... 查看原文

  • css学习

    Sass总结

    项目总结1. 利用编程语言书写CSS2. Sass项目结构3. 栅格化布局4. 响应式布局不足之处1. 项目选择不佳,模仿网站不易利用compass的种种方便2. 使用Compass的东西比较少,更多的是Sass的基础用法课程总结1. 基础+简单项目2. Sass常用的工具库期望1. 能起到抛砖引玉... 查看原文

  • 1-9章节课件所属章节:1-9章节课件
    下载
  • 1-9章节源码所属章节:1-9章节源码
    下载
  • 10-11课件所属章节:10-11课件
    下载
  • 10-11素材文件所属章节:10-11素材文件
    下载
  • 12-15课件所属章节:12-15课件
    下载
  • 12-15源码所属章节:12-15源码
    下载
  • 16-18章节课件所属章节:16-18章节课件
    下载
  • 16-17章节素材文件所属章节:16-17章节素材文件
    下载
Web前端开发胡敏

胡敏

TA的课程

5年后台开发经验,多年前端开发经验。现就职与某外企旗下电商公司,从事前端技术支持和前端技术框架开发。

更专业的职业课程

Web前端开发22745位同学正在学习

Web前端开发

你有一个红包等你领取!

免费电话咨询