Объяснение того, как использовать классы с SASS для мыслителя Python

Я исхожу из объектно-ориентированной Python-земли и нуждаюсь в помощи с основным вопросом, поскольку я изучаю SASS (+ compass/susy) и CSS. В глобальном масштабе я изо всех сил пытаюсь понять, как связывать классы и переменные, как я понимаю в Python.Объяснение того, как использовать классы с SASS для мыслителя Python

У меня есть панель навигации и хочу, чтобы все h1 теги в navbar были жирным, но все h1 теги в теле html doc были синими. Как бы я структурировал свой файл screen.scss, чтобы отразить то, что я пытаюсь сделать?

Чтобы сделать это немного сложнее, скажем, у меня есть несколько тегов, как h2 тега, который я хочу сделать то же самое с, а также (кроме этого времени я хочу h2 быть наклонными и красными соответственно). В этом случае я могу начать использовать селектор классов вместо id? Есть ли способ для гнездо мой файл sass такой, что h1 и h2 теги могут быть изменены только в том случае, если они находятся под class='navbar'? В Python, я бы сказал что-то вроде:

class navbar 
    h1 = make it bold 
    h2 = make it italic 

h1 = make it blue 
h2 = make it red

В SASS-земля, как бы вы структурировать свой файл screen.sass таким образом, что я могу просто присвоить каждому HTML тег (<htmltag class='navbar'> и все работает должным образом или, если есть? это лучший способ сделать это с тонны элементов, я открыт к тому, что, как хорошо

Спасибо

источник

2013-08-18 mh00h

слово 'class' в (S) CSS (или на самом деле, HTML) имеет другое значение, чем в python. Не пытайтесь их сопоставить. – Eric

Вам не нужны классы или переменные для вашего прецедента. Скажем, у вас есть HTML-документ, как эти (заметьте, что мы используем nav элемент для навигации, так что нет никакой необходимости в navbar класса):

<!doctype html> 
<html> 
    <head> 
    <title>An example document</title> 
    </head> 
    <body> 
    <nav> 
     <h1>A navigation heading</h1> 
     <h2>A subheading</h2> 
     <!-- etc. --> 
    </nav> 
    <main> 
     <h1>A general heading</h1> 
     <h2>A subheading</h2> 
     <!-- etc. --> 
    </main> 
    </body> 
</html>

... то, чтобы получить все эффекты, которые Вы задаете о в вашем вопросе, следующий SASS достаточно:

nav 
    h1 
    font-weight: bold 
    h2 
    font-style: italic 

main 
    h1 
    color: blue 
    h2 
    color: red

Я предполагаю, что от того, как вас слово ваш вопрос, когда вы говорите «тело HTML» документ, вы имеете в виду некоторые «главный ', который составляет , отдельный от этого на навигационной панели, а не все в body (который будет включает navbar). Если это предположение неверно, и вы действительно хотите, чтобы все было цвета, но только NavBar заголовки осмелев/наклонным, вы могли бы сделать это:

nav 
    h1 
    font-weight: bold 
    h2 
    font-style: italic 

h1 
    color: blue 

h2 
    color: red

источник

2013-08-18 20:27:17

Ваш псевдокод почти точно так же, как SASS:..

.navbar 
    h1 
     font-weight: bold 
    h2 
     font-style: italic 
body 
    h1 
     color: blue 
    h2 
     color: red

источник

2013-08-18 20:12:06

Я знаю, что мой ответ является родовым, но я нашел ваш вопрос также общим. Я предлагаю прочитать дополнительную информацию о OOCSS, here или here, например. Также неплохо проверить Brad's Atomic design. Я не думаю, что препроцессор имеет значение. Это скорее концептуальная проблема.

источник

2013-08-18 20:15:46 Krasimir

Объяснение того, как использовать классы с SASS для мыслителя Python

ответ

Смежные вопросы