不是如何,但最有效的方式來瞄准Sass中的元素?

[英]Not how but MOST efficient way to target element in Sass?


In my sass I'm keen for it not to get out of hand, i've a simple question/example what I'd like to know is what'd be the most efficient way to target the button in the example below?

在我的sass中,我渴望它不會失控,我有一個簡單的問題/例子,我想知道的是在下面的例子中最有效的方法來定位按鈕?

Personally I like option 2 but have i done it correctly?

我個人喜歡選項2,但我做得對嗎?

Call it picky but my problems are as listed below,

稱之為挑剔,但我的問題如下所示,

  1. I'm not a fan of adding class/id to everything through html

    我不喜歡通過html向所有內容添加class / id

  2. Using Sass's ability to nest/target child elements within a parent is too overly specific

    使用Sass在父級中嵌套/定位子元素的能力過於具體

Option 1: Give button class name in html making it easy to target in css

選項1:在html中給出按鈕類名,使其易於在css中定位

<div id = "box">
 <!-- Give button class/id -->
 <button class = "button1"></button>
</div>

Option 2: Have _buttons.scss partial containing a .button1 class

選項2:讓_buttons.scss部分包含.button1類

On my main.scss target the parent container #box without button a class name in html, and then target nested button

在我的main.scss目標上,父容器#box沒有按鈕,在html中有一個類名,然后是目標嵌套按鈕

buttons.scss

.button1 {
 width: 100px;
 height: 100px;
 background-color: grey;
}

main.scss

@import 'components/buttons.scss';

#box {
 button {
  // Extend class from buttons.scss
  @extend .button1;
 }
}

2 个解决方案

#1


0  

I think it depends on how often you are going to use the styling for different buttons. Having an id of 'box' seems very specific to me though. Are you not going to have any other boxes? If so, this needs to be a class and not an id.

我認為這取決於你為不同的按鈕使用樣式的頻率。有一個'盒子'的ID似乎對我來說非常具體。你不會有其他盒子嗎?如果是這樣,這需要是一個類而不是id。

Instead of targeting a parent and styling the child (what happens when u want to style an element without that parent), I would just style the class on the button itself.

而不是針對父項和樣式化子項(當你想要在沒有父項的情況下設置元素樣式時會發生什么),我只是在按鈕本身上設置類的樣式。

1st option - only one class needed in the HTML

第一個選項 - HTML中只需要一個類

.button1{
    /* button css */
}

2nd option - id attribute needed, specific HTML hierarchy, more CSS output

第二個選項 - 需要id屬性,特定HTML層次結構,更多CSS輸出

#box button, .button1{
    /* button css */
}

#2


0  

A lot of the answer as to what's "most efficient" when it comes to SASS and partials depends on what your complete SASS configuration will look like, so it's hard to say based on a specific example.

關於SASS和partials的“最有效”的答案取決於你的完整SASS配置是什么樣的,所以基於一個具體的例子很難說。

Are you going to need to use the style for this button in multiple stylesheets?

您是否需要在多個樣式表中使用此按鈕的樣式?

For instance, if you only have one style sheet (main.scss), I'd say there's no reason to use a partial at all. Partials should be used when you need to include the items in the partial in multiple stylesheets. Many people, for example, will write all variables and mixins in a partial and include them in every stylesheet.

例如,如果你只有一個樣式表(main.scss),我會說沒有理由使用部分樣式表。當您需要在多個樣式表中包含部分項時,應使用部分。例如,許多人將部分編寫所有變量和mixin,並將它們包含在每個樣式表中。

Given this one specific example, the more efficient thing to do is not use a partial.

鑒於這一個具體的例子,更有效的做法是不使用部分。

Adding a class to the button and targeting that class in the css, or targeting the container and child element (without class) is equally efficient:

在按鈕中添加一個類並在css中定位該類,或者定位容器和子元素(沒有類)同樣有效:

#box button {}
button.button1 {}

Also, there's no reason to nest here if you don't have other rules inside of the #box parent:

此外,如果您在#box父級中沒有其他規則,則沒有理由在此處嵌套:

#box {
 button {
 }
}

Just do this:

這樣做:

#box button {}

(And be careful with extends. If used in areas where they're not really needed, you can end up with a TON of unnecessary style rules. See this great article.)

(並且要小心延伸。如果在不需要它們的區域使用,你最終會得到一些不必要的樣式規則。請參閱這篇偉大的文章。)


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/01/18/af90c7044e166a54affff3cc5fc1aabf.html



 
  © 2014-2022 ITdaan.com 联系我们: