不是如何,但最有效的方式来瞄准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 联系我们: