通過添加到SASS中的類名嵌套的CSS選擇器

我正在構建flexbox網格系統，並期望保持我的scss文件易於管理。通過添加到SASS中的類名嵌套的CSS選擇器

類別爲col-2，col-4，col-6的元素的選擇器有什麼問題導致它們不起作用？

.grid-container{ 
max-width:1280; 
margin: 0 24px; 
display: flex; 

    [class^="col"]{ 
     flex:1; 
     margin: 0 8px; 

     &:first-child{ 
      margin-left:0; 
     } 
     &:last-child{ 
      margin-right:0; 
     } 

     [class*="-2"]{ 
      width:16.5%; 
     } 

     [class*="-4"]{ 
      width:33%; 
     } 

     [class*="-6"]{ 
      width:50%; 
     } 
    } 
}

所有列越來越保證金和第一胎和最後一個孩子的行爲，但不能從其他選擇寬度的樣式。這可能是一個彈性盒問題？柔性基礎？

來源

2017-06-29 CoJanks

嘗試'＆[類* = 「 - 2」]'（請注意'＆'） – Morpheus

[class^="col"] { 
    [class*="-2"] { 
    width: 16.5%; 
    } 
    [class*="-4"] { 
    width: 33%; 
    } 
    [class*="-6"] { 
    width: 50%; 
    } 
}

將產生以下選擇：

[class^="col"] [class*="-2"] {} 
[class^="col"] [class*="-4"] {} 
[class^="col"] [class*="-6"] {}

通知每個屬性選擇器之間的空間。上面的選擇器將首先搜索具有以.col類開始的類屬性的元素。然後他們找到嵌套在.col元素中的元素，其中的類屬性包含-2,-4或-6屬性中的某處。

通過添加＆符號&，您可以捕獲當前選擇器路徑。下面SCSS是一樣的，你有什麼現在：

[class^="col"] { 
    & [class*="-2"] { 
    width: 16.5%; 
    } 
}

編譯成（屬性選擇器之間的空間）：

[class^="col"] [class*="-2"] {}

立即嵌套選擇之前加上符號（比如你有first-child和last-child）給出了不同的結果，一個你（可能）想：

[class^="col"] { 
    &[class*="-2"] { 
    width: 16.5%; 
    } 
}

編譯成（屬性選擇器之間沒有空格）：

[class^="col"][class*="-2"] {}

恕我直言，你有什麼是目前在工程。我建議更直接和靈活的事情。使用常規的類選擇器。

.col {  
    &-2 { width: 16.5%; } 
    &-4 { width: 33%; } 
    &-6 { width: 50%; }  
} 

[class*="col-"] { 
    flex: 1; 
    margin: 0 8px; 

    &:first-child { margin-left: 0; } 
    &:last-child { margin-right: 0; } 
}

請參閱下面的Stack Snippet來查看以上內容編譯成的內容。請注意，我使用了*=（星號等於），而不是^=（插入符號等於）來表示放置靈活性。如果您想強制列類成爲類屬性值中的第一個類，則由您決定。

https://codepen.io/anon/pen/yXveRq

.row { 
 
    display: flex; 
 
} 
 

 
.col-2 { width: 16.5%; } 
 
.col-4 { width: 33%; } 
 
.col-6 { width: 50%; } 
 

 
[class*="col-"] { 
 
    flex: 1; 
 
    margin: 0 8px; 
 
} 
 

 
[class*="col-"]:first-child { 
 
    margin-left: 0; 
 
} 
 
[class*="col-"]:last-child { 
 
    margin-right: 0; 
 
}

<div class="row"> 
 
    <div class="col-4">Col 1</div> 
 
    <div class="col-4">Col 2</div> 
 
    <div class="col-4">Col 3</div> 
 
</div>

來源

2017-06-29 15:48:36 hungerstar

這不是「flexbox」問題。這是一個「CSS」問題。

[class^="col"] { 
    [class*="-2"] { 
     width:16.5%; 
    } 
}

將導致這個CSS：

[class^="col"] [class*="-2"]{width:16.5%;}

但你可能想...

[class^="col"][class*="-2"]{width:16.5%;}

...這將由...

[class^="col"] { 
    &[class*="-2"] { 
     width:16.5%; 
    } 
}

生產

空間（在CSS中）和＆符號&（在SCSS中）是不同的。

來源

2017-06-29 15:41:35

CoJanks。快速和污垢修復是爲.grid容器中的.col類上的'flex'設置附加定義。

Here是一個快速和骯髒的答案來解決你的問題雅！

flex:1 1 auto;

僅供參考。類嵌套中也有一些差異，我在所提供的鏈接中進行了介紹。

來源

2017-06-29 15:44:28

通過添加到SASS中的類名嵌套的CSS選擇器

回答

相關問題