利用Sass编写高质量CSS

课程导师

何虎 何虎
8年软件开发经验,擅长互联网应用程序开发,曾研发过千万级医药行业ERP项目;5年的项目讲师、实训项目经验,讲课生动,深受学生喜爱。
00:00:00
Play
Next
00:00 / 00:00
40%
  • 2x
  • 1.5x
  • 1.25x
  • 1x
1x
6.sass语法(基础部分:变量与导入)
离线学习

下载APP离线观看

技能补充更多
  • Java 语言基础
    Java 语言基础

    学习Java基本语法、变量、流程控制、修饰符、修饰符、继承、抽象、接口、数组、异常。

  • HTML5+CSS3快速入门
    HTML5+CSS3快速入门

    HTML5+CSS3是web前端开发的常用基础语言之一,本章将分别从html5相关元素及应用、css3相关元素及应用及html5+css3实战等方面进行介绍,快速入门html5+css3。

  • Javascript初步
    Javascript初步

    Javascript是web前端开发常用技术之一,也是web前端开发必学技术之一,本章麦子学院原创JavaScript视频教程,将围绕其相关基础知识和实际应用全面讲解,让你轻松掌握并精通JavaScript的使用。

  • Web前端开发之Ajax初步
    Web前端开发之Ajax初步

    麦子学院原创web前端开发常用技术 — ajax视频教程, 主要从ajax的运行环境、元素的应用、及其数据类型的运用等方面进行介绍和实战,让学员能快速入门并精通ajax的使用。

  • 最新问答
  • WIKI资料
  • 课件下载
只看我参与的
  • 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章节素材文件

© 2012-2016 www.maiziedu.com

蜀ICP备13014270号-4 Version 5.0.0 release20160127

一名课程顾问想与您沟通

免费电话咨询