Jump to content
  • 0

Примеры хорошего SCSS


leshiple
 Share

Question

Здравствуйте, скачал макет, начал верстать. Для написания стилей использовал SCSS. Стал наводить порядок в SCSS и столкнулся с проблемой организации цветов и шрифтов.

Мои цвета:

s_1431773344_7381147_4977bfc7c3.jpg

 

Мои шрифты:

s_1431773411_1756068_c7e64ad56e.jpg

 

Цветов много, какова вероятность того что дизайнер при создании макета ошибся на пару тонов и такие цвета как #808080, #868585, #8b8b8b, #8d8c8c можно объеденить? Как лучше их организовать? Использовать функцию darken или математические вычисления или присваивать переменные grey_dark, grey_very_dark, grey_superdark?

 

Вариаций сочетананий шрифтов тоже много. Как их правильно организовать? В некоторых случаях размер, начертание и семейство совпадает, а line-height нет. Или отчилается размер. Как вы боритесь со шрифтами?

 

Где можно посмотреть примеры хорошего SCSS в проектах (не библиотеках)?

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Вставлю своё нубское мнение, если оно кому нибудь вообще интерсно :Р

 

Организовывать цвета в любом случае нужно так, как удобно вам, но что касается функций типа darken они, имхо, подходят только тогда, когда конкретное значение цвета неизвестно, а вам нужно всего навсего заховерить объект, например. ТО есть все известные явно цвета нужно выносить в переменные. Можно ли объединить - это интересный вопрос, во всяком случае можно попробовать, но в том случае если вы уверены, что ваш монитор хорошо откалиброван и все эти цвета действительно на глаз практически не различимы.

 

Шрифты, имхо, прописывать наиболее часто встречающиеся значения, остальные значения по факту дописывать.

Link to comment
Share on other sites

  • 0

ТО есть все известные явно цвета нужно выносить в переменные. 

А как называть эти переменные? По какому принципу?

 

Можно ли объединить - это интересный вопрос, во всяком случае можно попробовать, но в том случае если вы уверены, что ваш монитор хорошо откалиброван и все эти цвета действительно на глаз практически не различимы.

Наверное вопрос относительный. У всех глаза разные. И решать скорее всего человеку создававшему дизайн.

 

Шрифты, имхо, прописывать наиболее часто встречающиеся значения, остальные значения по факту дописывать.

У меня 4 пары повторяющихся значений. И какие им(переменным) имена давать? По типу именования классов в БЭМ?

 

 

Где можно посмотреть примеры хорошего SCSS в проектах (не библиотеках)?

Link to comment
Share on other sites

  • 0
А как называть эти переменные? По какому принципу?

 

Зависит от того, что перед этим принимали. Например, выпив пару пива, я называю цвета жизнеутверждающими лозунгами, типа: deep_purple, blue_cosmos, orange_heaven и т.д., на светлую голову с утра, после чашечки кофе, несколько иначе. Шутка, конечно, но с долей правды. Всё индивидуально, если не оговорено конкретно. Например в больших проектах в команде на этот счёт могут быть определённые установки, в самостоятельных проектах вы сам себе начальник - пишете как нравится. Лишь бы это можно было нормально понять человеку, который будет после вас в этом коде ковыряться.

 

Наверное вопрос относительный. У всех глаза разные. И решать скорее всего человеку создававшему дизайн.

Именно. В любом случае действует правило - не уверен, не косячь.

 

У меня 4 пары повторяющихся значений. И какие им(переменным) имена давать? По типу именования классов в БЭМ?

Лично я называю так-же, как и шрифт, чаще всего.

Link to comment
Share on other sites

  • 0

Включения это %something? Можно и так и так. Есть разница особая в этом случае? 

%OpenSansRegular {   font: 15px "OpenSansRegular";  color: #ccc;  line-height: 1.5em;  letter-spacing: 1px;}

Хотя, можно и так, даже лучше, чёт я раньше об этом не задумывался ))) Но мне простительно, я не волшебник, только учусь.

@mixin OpenSansRegular($size) {font: $size "OpenSansRegular", sans-serif;color: #ccc;line-height: 1.5em;letter-spacing: 1px;}.main {  @include OpenSansRegular(15px);  max-width: 1600px;  margin: 0 auto;  overflow: hidden; }

 

Edited by kidrock
Link to comment
Share on other sites

  • 0

тогда уж вот так: 

@mixin arial ($font-size, $line-height, $letter-spacing, $color) {    font: $font-size + px + "/" + $line-height + px "Arial", sans-serif;	color: $color;	letter-spacing: $letter-spacing + px;}
$color-skyblue: #00aeef;.main { 	@include arial(15,20,1, $color-skyblue); 	 }
Edited by kidrock
Link to comment
Share on other sites

  • 0

 

тогда уж вот так: 

@mixin arial ($font-size, $line-height, $letter-spacing, $color) {    font: $font-size + px + "/" + $line-height + px "Arial", sans-serif;	color: $color;	letter-spacing: $letter-spacing + px;}

letter-spacing....  В твоем случае нельзя пропускать значения. А если устанавливать значения по умолчанию то тогда на выходе получим лишний код. Нудно будет помот искать где letter-spacing: normal сбрасывает унаследованное значение, а где и побочный эффект от примеси.

Link to comment
Share on other sites

  • 0

Идеального ничего не бывает. Под каждый проект всё равно нужно корректировать. В вашем случае также неизбежно устанавливается высота строки, названная почему-то letter-spacing.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By jksnf
      Не работает transition при появлений модального окна:
      <a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.

      Что делать?
    • By Alexand
      Здравствуйте дорогие специалисты програмирования.
      Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят!
      Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту.
      Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application 
      Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit
      С уважением к Вам, за ранее спасибо.
    • By K0D0D
      Может кто-то оценить уже готовый сайт? Заранее спасибо.
    • By Алеся
      Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо!  
      <div class="three navigation items">       <nav> <ul>   <li> <div class="navigation__item"></div> <a href="#">Hot themes</a>   </li>   <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a>   </li>   <li>     <div class="navigation__item"></div>     <a href="#">El'Classico</a>   </li> </ul>       </nav>     </div>   .navigation {
          background-color: rgba(31, 30, 30, 0.438);
          width: 900px;
          height: 30px;  
      }
      .navigation li {
          display: inline-block;
          padding: 5px 15px;
      &:hover {
          content: "";
          background-color: rgb(36, 36, 36);
          cursor: pointer;
      }
      }
      a {
          color: black;
          text-decoration: none;
          font-family: sans-serif;
      &:hover {
        content: "";
        color: white;
       }
      }

    • By VeraVostro
      Заранее прошу прощения если этот вопрос уже задавался, но, несмотря на обширное кол-во информации по теме, найти ответа на свой вопрос я не смогла.

      Суть в следующем:
      Например, у меня есть два отдельных scss файла - header.scss и footer.scss. Стили футера почти полностью совпадают со стилями хедера, за исключением пары свойств.
      Но если я прописываю в файле footer.scss @extend header - стили хедера не могут использоваться, т.к. это другой файл.

      Подскажите, как идеологически вернее делать в данной ситуации? Чтобы новый класс/элемент получал стили существующего класса из другого файла + добавлял свои или менял некоторые стили на свои.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy