通过嵌套的写法可以大大减少代码的重复。

假设下面一段代码是写在Ext.data.DataView的tpl里面的一段描绘table的html(实际每一行都要加上‘’)，

该table会有2个mode，对应的css类分别为mode1,mode2，通过变量"mode"决定是哪个css类

每个单元格会有不同的状态，选中状态selected和非选中状态unselected，通过getClass方法得到是哪个css类。

----------------------------------------------------------------------

<table border="1" class="{[mode]}">
<tbody>
<tr>

<tpl for=".">

<td class="{[this.getClass(values)]}">{date}</td>

</tr><tr>

</tpl>

</tr>
</tbody>
</table>

----------------------------------------------------------------------

对应的scss写法

----------------------------------------------------------------------

table
{

$bd-color: #A3A7AF;
width: 100%;
border-collapse: separate;
table-layout: fixed;
font-size: 20px;
color: #3F4E5E;
background-color: #EEE;

&.mode1
{
  td
  { 
     vertical-align: top;
  }
}

&.mode2
{
   tr.selected
  {
     td
    {
        color: #FFFFFF;
        text-shadow: #333 1px 1px 0px;
        border: 1px solid black;

    }

  }
}

// borders

tbody
{
   td
   {
        border-bottom: 1px solid $bd-color;
        border-left: 1px solid $bd-color;
        border-right: 1px solid lighten($bd-color, 20%);
        border-top: 1px solid lighten($bd-color, 20%);
   }
}

// cell styles
td
{
   font-weight: bold;
   position: relative;

   vertical-align: top;

   text-align: right;
   font-size: 0.7em;

   &.unselectable

   {
       color: #89909A;
   }

   &.selected
   {
       color: #FFFFFF;
       text-shadow: #333 1px 1px 0px;
       border: 1px solid black;
   }

}

}

----------------------------------------------------------------------

编译出的css如下

----------------------------------------------------------------------

table {
width: 100%;
border-collapse: separate;
table-layout: fixed;
font-size: 20px;
color: #3F4E5E;
background-color: #EEE;
}
table.mode1 td {
vertical-align: top;
}
table.mode2 tr.selected td {
color: #FFFFFF;
text-shadow: #333333 1px 1px 0px;
border: 1px solid black;
}
table tbody td {
border-bottom: 1px solid #a3a7af;
border-left: 1px solid #a3a7af;
border-right: 1px solid #dadbde;
border-top: 1px solid #dadbde;
}
table td {
font-weight: bold;
position: relative;
vertical-align: top;
text-align: right;
font-size: 0.7em;
}
table td.unselectable {
color: #89909A;
}
table td.selected {
color: #FFFFFF;
text-shadow: #333333 1px 1px 0px;
border: 1px solid black;
}

----------------------------------------------------------------------

上面是对html标签，类之间（类是直接指定在html标签上的），嵌套关系写法的一个简单说明，

但是，在sencha touch/extjs开发时，类不是直接指定给某个html标签的，而是通过cls,itemCls,baseCls等这些配置项指定的。

这时如何在scss中组织这种嵌套关系呢？

也许会有这样的疑问，每个ext的component（如panel）最终生成的HTML很复杂（div嵌套很多），

我并不确定给cls指定css类之后，会作用到哪个html标签上。

这其实没有关系，因为css类之间是有继承关系的，一般父标签的css也对子孙标签起作用。

而且可以跨代继承。

所以只要按照component之间的父子关系来组织scss的嵌套关系就可以了。

下面的例子是一个form panel,指定css为myformview，每个field指定css为detail,

其中textField如果输入不满足条件会有一个边框会变红，通过inputCls指定error css.

------------------------------------------------------------------------

Ext.define('MyFormView', {
extend: 'Ext.form.Panel',
requires : ['Ext.form.FieldSet'],
config: {
   layout: 'vbox',
   cls:'myformview',
   items : [
   {
      xtype : 'fieldset',
      itemId : 'calDetailForm',
      items : [
      {
          xtype : 'selectfield',
          cls : 'detail',
          itemId : 'calendarField',
          label : LABEL_CALENDAR,
          name : 'calendarId',
          required : true,
          options: []
      },

     {
         xtype : 'textfield',
         cls : 'detail',
         itemId : 'descriptionField',

         inputCls:'error',
         label : LABEL_DESCRIPTION,
         name : 'description',
         placeHolder : 'description'
    }

    ]

}

}）

------------------------------------------------------------------------

scss写法如下

------------------------------------------------------------------------

.myformview{

   .detai{}

   .error{}

}

------------------------------------------------------------------------

还有一种情况是js代码与scss之间的关系,js里面直接写class名，空格隔开，表示指定多个class

myTest : function(cmp){

   cmp.element.addCls('myCls1 myCls2');

}

对应的scss的写法

----------------------

.myCls1{

   .myCls2{}

}

-----------------------

scss写法上的comment

类选择器用“.”表示。

html标签直接写，什么也不用加，html标签之间用空格隔开。

 "&"表示该类是相对于上一级嵌套的，如类之间如果写在同一行，不用&，表示类之间的嵌套，加上的话表示相对于上一级的嵌套。

 如果写在不同行，加与不加是一样的，

td{

.unselectable .selected

 {
       color: #89909A;
   }

}

生成的css-------->

table td.unselectable .selected{
color: #89909A;
}

下面两种写法是一样的

td{

&.unselectable &.selected

   {
       color: #89909A;
   }

 }

td{

.unselectable

{
       color: #89909A;
   }

.selected

  {
       color: #89909A;
   }

 }