Sass:初识Sass与考拉工具的使用

  

,

,

二,

,

,

,

【扩展】SASS提供四个编译风格的:

<李>

嵌套:嵌套缩进的css代码,它是默认值。

<李>

扩展:没有缩进的,扩展的css代码。

<李>

紧凑:简洁格式的css代码。

<李>

压缩:压缩后的css代码。

,

四,又到了写代码的时候啦,随便用一款文本编写工具打开演示。scss

1。

 1, ul  li {2,,,,,颜色:,红色;3,}

 ul {
  李,,,{
  ,,,,,,,一个{
  ,,,,,,,,,,,颜色:,黑色;
  ,,,,,,,}
  ,,,}
  }

修改并保存,此时,我们见到生成的演示。css代码是一样的

 Sass:初识Sass与考拉工具的使用“> </p> <p>, </p> <p>如果我们想写成这样的css: </p> <pre> ul  li 答:hover  {
  ,,颜色:蓝色;
  }</pre> <p> </p> <p> </p> <pre> ul {
  李,,,{
  ,,,,,,,一个{
  ,,,,,,,,,,,颜色:,黑色,,,,,,,,,,,,,,:{徘徊
  ,,,,,,,,,,,,,,,颜色:,蓝色;
  ,,,,,,,,,,,}
  ,,,,,,,}
  ,,,}
  }</pre> <p> </p> <p>【解说】</p> <p>使用变量:所有变量以美元开头</p> <p>在演示。scss编写以下代码:</p> <pre>颜色:美元,#美国广播公司(abc);
  一个{
  ,,,颜色:颜色美元;
  }</pre> <p> </p> <pre> a  {
  ,,颜色:#美国广播公司(abc);
  }</pre> <p>, </p> <p>五,今天所写代码截图</p> <p>==demo。scss==</p> <p> <img src=Sass:初识Sass与考拉工具的使用