Bootstrap + SASS, как начать работу?

#html #css #bootstrap #sass

Установил SASS через консоль, по этому туториалу sass-scss.ru. 

В работе мне потребуется bootstrap.

Вопрос: 


Как начать использовать в проекте SASS, создать файл style.scss и писать в него css
код или нужны дополнительные действия? 
Как правильно подключить bootstrap и начать его использовать в проекте? 


Сейчас на начальной стадии, html код выглядит так:




    
      
        
        
        
        
        
      
    
      
        
Hello, world!
    
        
        
        
      
    



    

Ответы

Ответ 1

Если честно все не так просто, советую посмотреть/почитать гайд по развёртыванию
проекта на Gulp/Webpack так как если писать тут выйдет очень много кода. Что бы использовать
Sass нужно сначало развернуть NPM + например Webpack.

https://proglib.io/p/webpack-in-15/ - пример,  но в интернете их ещё масса, стоит
лишь поискать. 

Но для новичка Gulp будет легче в плане понимания. 

После того как ты установишь зависимости на свой проект, выполни установку ещё двух
пакетов: 

npm install bootstrap
npm install sass


И далее опиши таски в webpack/gulp, опять таки примеров в интернете много. 

Будут вопросы пиши:)


Ответ 2

1. Вариант: Использовать webpack или gulp сборщик. Быстро и удобно, но нужно правильно
настроить. Примеров сборки в сети достаточно много.

Для gulp сборки выполнить: 

npm i –g gulp
npm i --save-dev gulp
npm i --save-dev gulp-sass
npm i bootstrap


Настроить gulpfile.js.

Подключение bootstrap в style.scss:

@import "node_modules/bootstrap/scss/bootstrap.scss";


2. Вариант: Использовать online конверторы (например sassmeister ). Минусы - долго
и неудобно.

3. Вариант: Конвертер с помощью командной строки ruby. Для этого нужно установить
rubyinstaller. Запустить командную строку ruby. Выполнить команды:

gem install sass

sass input.scss output.css


или

sass --watch input.scss:output.css

node-sass не устанавливается

#nodejs #sass #webpack

Несмотря на все ухищрения не устанавливается node-sass. sass-loader для webpack установился
нормально (есть в package.json), а модуль node-sass устанавливается (видно появляется
соответствующая папка в  node-modules, IDE Sublime Text), потом выдается ошибка и папка
исчезает.

Ошибка такая 

failed at the node-sass@3.4.2 postinstall
node scripts/build.js

Exit status 3221225477


Я все перепробовала: создавала карту в webpack.config.js

{
  test: /\.scss$/,
  loader: 'style!css!sass?sourceMap'
}


В loader.js заменила строчку 

if(map && typeof map !== "string") {
    map = JSON.stringify(map);
    }


Ничего не работает! Или на windows XP в принципе не устанавливается этот модуль (
хотя все остальные модули справно работают)?
    

Ответы

Ответ 1

Вот и нашла ответ на свой вопрос. На XP есть проблема со входом в библиотеку msvcrt.dll
для Ruby. Хотя похожие проблемы с установкой node-sass есть и на 10 версии OS. На старых
версиях проблема решается установкой своей среды разработки. Подробности здесь:

https://github.com/oneclick/rubyinstaller/issues/239

https://github.com/oneclick/rubyinstaller/wiki/Development-Kit#building-the-devkit

https://github.com/oneclick/rubyinstaller/

SASS, задать высоту изображению, исходя из его ширины

#css #изображения #sass

Изображение должно занимать 100% ширины блока. Блок резиновый, до определённых моментов.
Мне нужно, чтобы высота изображения была в 3,3 раза меньше, чем ширина. Как это задать
в SASS?
    

Ответы

Ответ 1

Вариант с img {position: absolute;}



.container {
  max-width: 400px;
  width: 100%;
}

.image {
  height: 0;
  padding-bottom: 30%;
  position: relative;
  width: 100%;
}

img {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

  

        
  
  

        
  
  

        
  





Или смотреть на jsfiddle

Вариант с инлайновым background-image



.container {
  max-width: 400px;
  width: 100%;
}

.image {
  background-position: 50% 50%;
  background-size: cover;
  height: 0;
  padding-bottom: 30%;
  position: relative;
  width: 100%;
}

  

  

  






Или смотреть на jsfiddle


Ответ 2

Можно сделать вот так:



.wrapper {
    width: 100%; 
}

.wrapper-inner {
    position: relative;
    height: 0;
    border: none;
}

.ratio-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #eee;
}

.xwrapper {
    padding-top: 30.30%; /* 100% ширины делим на 3.3 */
}
img{
  max-height: 100%
}

    

        

            
        
    

Ошибка в консоли throw er; // Unhandled 'error' event ^ при использовании gulp

#javascript #css #gulp #sass

Учусь пользоватся gulp, при импортировании свойств из SASS в CSS, в консоли возникает
такая ошибка: 

C:\Users\serge\Desktop\Gulp>gulp sass
[18:06:21] Using gulpfile ~\Desktop\Gulp\gulpfile.js
[18:06:21] Starting 'sass'...

events.js:136
      throw er; // Unhandled 'error' event
      ^
Error: app\sass\_part.sass
Error: Invalid CSS after "    font-size:": expected pseudoclass or pseudoelement,
was "25px {} }"
        on line 2 of app/sass/_part.sass
>>     font-size:25px {} }
   -------------^

    at options.error (C:\Users\serge\Desktop\Gulp\node_modules\node-sass\lib\index.js:291:26)


Код из файла JS (подозреваю что в нём где-то ошибка):

var gulp = require('gulp'),
    sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});

    

Ответы

Ответ 1

Добавьте пробел:

font-size: 25px


Без пробела SASS воспринимает :25px как стейт (:hover) или как псевдокласс (::before)

Как создать переменные, которые будут видимы в SASS, JavaScript и Jade(Pug)

#javascript #sass #jade #pug

Каким наиболее простым образом можно создать переменные, которые будут видимы в:


SASS
JavaScript-файлах (с использованием Webpack и возможностей ES6)
Jade-шаблонах


Зачем это надо, думаю понятно: меняем имя, например, CSS-класса в одном месте, и
оно автоматически подставляется везде. Без этой возможности изменить имя класса в крупном
проекте - целая проблема.
    

Ответы

Ответ 1

создаете файл .env и в нем переменную SOME_ENV_VAR к примеру
SASS_ENV=blabla

читаем переменную в компиляторе SASS или JS: var ENV = process.env.SOME_ENV_VAR ||
'default';

асайним переменную для Jade: 

const express = require('express');
var app = express();
app.locals.env = process.env;

и читаем переменную в Jade #{env.SOME_ENV_VAR}

Дополнение #1

var sass = encodeURIComponent(jsonToSassVars(sassGlobals));
var webpackConfig = {
    module: {
        loaders:[
            {test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass}
        ]
    },
}


jsonToSassVars - https://gist.github.com/Kasu/ea4f4861a81e626ea308

Update: the previous link is not available anymore, prefer to use https://gist.github.com/ali-master/cb54a3501c0ea29a88a0297cb9533be9

Как создать переменные, которые будут видимы в SASS, JavaScript и Jade(Pug)

#javascript #sass #jade #pug

Каким наиболее простым образом можно создать переменные, которые будут видимы в:


SASS
JavaScript-файлах (с использованием Webpack и возможностей ES6)
Jade-шаблонах


Зачем это надо, думаю понятно: меняем имя, например, CSS-класса в одном месте, и
оно автоматически подставляется везде. Без этой возможности изменить имя класса в крупном
проекте - целая проблема.
    

Ответы

Ответ 1

создаете файл .env и в нем переменную SOME_ENV_VAR к примеру
SASS_ENV=blabla

читаем переменную в компиляторе SASS или JS: var ENV = process.env.SOME_ENV_VAR ||
'default';

асайним переменную для Jade: 

const express = require('express');
var app = express();
app.locals.env = process.env;

и читаем переменную в Jade #{env.SOME_ENV_VAR}

Дополнение #1

var sass = encodeURIComponent(jsonToSassVars(sassGlobals));
var webpackConfig = {
    module: {
        loaders:[
            {test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass}
        ]
    },
}


jsonToSassVars - https://gist.github.com/Kasu/ea4f4861a81e626ea308

Update: the previous link is not available anymore, prefer to use https://gist.github.com/ali-master/cb54a3501c0ea29a88a0297cb9533be9

Логика работы SASS SCSS и LESS?

#sass #scss #less

Хочу понять в теории, как работают css препроцессоры SASS SCSS и LESS.


Браузер не читает напрямую данные из .sass (например) файла, нужно вначале скомпилировать
.sass > .css?
Т.е. получается, что .sass файлы являются что-то вроде 'базовой' библиотеки стилей,
из которой потом 'лепится' уже готовый набор .css файлов?

    

Ответы

Ответ 1

Браузер не читает напрямую данные из .sass (например) файла, нужно вначале скомпилировать
.sass > .css?


Браузер может работать только с CSS и для этого sass компилируется в CSS


  Т.е. получается, что .sass файлы являются что-то вроде 'базовой' библиотеки стилей,
из которой потом 'лепится' уже готовый набор .css файлов?


sass это не "базовая библиотека" она сама по себе не содержит никаких стилей, sass
это другой формат стилей и после компиляции получается обычный css который уже используется
браузером. sass даёт большие возможностей, часто облегчает вёрстку и делает стили лучше
читаемыми для разработчика.

Примерно такая же ситуация и с LESS.

В чём отличие между less и sass?

#less #вёрстка #sass #css

Служат для одной и той же цели, имеют похожие методы, а в сущности различаются только
синтаксисом и расширением? По мне все же sass поудобнее(покороче) будет, как считаете?    

Ответы

Ответ 1

отличий куча во первых sass на ruby, less на js синтаксис оч сильно отличается посмотри
на примеры:

http://lesscss.org/
http://sass-lang.com/ 

ну а про расширение я бы сказал в последнюю очередь. Чтобы окончательно все расставить
по местам читай вот что: SASS против LESS


Ответ 2

На самом деле less попроще, удобнее и очень легко понять суть препроцессоров на нем.
SASS имеет разные плюшки, более строгий. Лично я для себя использую LESS, в первую
очередь из-за простоты и скорости сборки. К SASS есть прикольная надстройка Compass.
По-моему если уж SASS, то тогда с Compass. Но компилится он жутко долго. У меня LESS
версия бутстрапа - 1-2 секунды против 10-15 SASS. Чувтсвуется разница, не так-ли?
Ну и да, смотрите статью на хабре в ответе Павла.

Как создать такие треугольники с помощью псевдоэлементов?

#css #sass #less

Здравствуйте,помогите,пожалуйста,создать вот такие вот треугольники...У меня,правда,нет
идей. Уже гуглил на эту тему,но ничего стоящего не нашел. Изображением вставлять не
канает. Нужно именно с помощью CSS.


    

Ответы

Ответ 1

Gradient Generator - colorzilla.com

CSS triangle generator - http://apps.eky.hk/css-triangle-generator/



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.b-breadcrumbs {
  text-align: center;
  font-size: 0;
  background: #271E19;
  padding: 25px;
  line-height: 1.15;
}
.b-breadcrumbs > li {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  margin-left: 34px;
}
.b-breadcrumbs > li > a {
  height: 48px;
  position: relative;
  display: block;
  color: #000;
  font-weight: 700;
  padding: 15px;
  background: -moz-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.b-breadcrumbs > li > a:before,
.b-breadcrumbs > li > a:after {
  content: '';
  position: absolute;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}
.b-breadcrumbs > li > a:before {
  top: 0;
  border-width: 24px 0 0 24px;
  border-color: transparent transparent transparent #FFC937;
}
.b-breadcrumbs > li > a:after {
  bottom: 0;
  border-width: 24px 24px 0 0;
  border-color: #FFA523 transparent transparent transparent;
}
.b-breadcrumbs > li:last-child > a:before,
.b-breadcrumbs > li:last-child > a:after {
  display: none;
}
.b-breadcrumbs > li > a > span {
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 24px;
}
.b-breadcrumbs > li > a > span:before,
.b-breadcrumbs > li > a > span:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  left: 0;
}
.b-breadcrumbs > li > a > span:before {
  top: 0;
  border-width: 0 24px 24px 0;
  border-color: transparent #FFC937 transparent transparent;
}
.b-breadcrumbs > li > a > span:after {
  bottom: 0;
  border-width: 0 0 24px 24px;
  border-color: transparent transparent #FFA523 transparent;
}
.b-breadcrumbs > li > a:hover {
  color: #fff;
  background: red;
}
.b-breadcrumbs > li > a:hover:before {
  border-left-color: red;
}
.b-breadcrumbs > li > a:hover:after {
  border-top-color: red;
}
.b-breadcrumbs > li > a:hover > span:before {
  border-right-color: red;
}
.b-breadcrumbs > li > a:hover > span:after {
  border-bottom-color: red;
}

  
Item 1
  
  
Item 2
  
  
Item 3
  
  
Item 4
  





Вариант 2 - с использованием clip-path



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.b-breadcrumbs {
    text-align: center;
    font-size: 0;
    background: #271E19;
    padding: 25px;
}
.b-breadcrumbs > li {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    margin-left: 0;
}
.b-breadcrumbs > li > a {
    position: relative;
    display: block;
    color: #000;
    font-weight: 700;
    padding: 15px 25px;
    background: -moz-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255,
201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}
.b-breadcrumbs > li:first-child > a{
    padding-left: 15px;
   -webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
  clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
}
.b-breadcrumbs > li:last-child > a{
    padding-right: 15px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
}
.b-breadcrumbs > li > a:hover{
    color: #fff;
    background: red;
}

    
Item 1
    
Item 2
    
Item 3
    
Item 4



Ответ 2

Сам треугольник можно получить задавая различные цвета границам разных сторон элемента,
а добавить к элементу - используя псевдоэлементы :before :after



   .block {
    background: green;
    display: inline-block;
    position: relative;
    color: #fff;
    width: 120px;
    height: 20px;
    margin: 10px;
   }
   .block::after {
    content: '';
    position: absolute;
    left: 120px; /* Положение треугольника */
    border: 10px solid transparent;
    border-left: 10px solid green; 
   }
   .second::before {
    content: '';
    position: absolute;
    left: -20px;
    border: 10px solid green;
    border-left: 10px solid transparent;
   }
  

  Концепция
  
  

 Реализация
  

Чем глобально отличается текстовый редактор от IDE?

#веб_программирование #ide #sass #notepad++ #интерпретатор

Не пойму в чем глобальное различие IDE и текстового редактора? Согласно википедии
IDE включает в себя текстовый редактор, компилятор или интерпретатор, средства автоматизации
сборки, отладчик. 

Но насколько я понимаю, в интернет-технологиях IDE совсем не нужен, ведь автоматизация
сборки - это что-то типа include, sass, Emmet (что также легко устанавливается и в
качестве плагина для текстового редактора, Хотя как-то пробовал IDE-шку, там по-умолчанию
не было ни sass, ни Emmet), отладчик - это табличка, которая появляется, когда ошибка
в синтаксисе языка (по-моему по-умолчанию в текстовых редакторах встроен), интерпретатор
думаю тут вообще лишний, т.к. самый лучший интерпретатор для интернет-технологий -
это браузер? Или вообще все не так? Или может для интернет-технологий он лишний, но
для обычных десктопных программ очень даже нужен? 
    

Ответы

Ответ 1

В текстовых редакторах нет понятия "проект". Что даёт это понятие:


Радикальное ускорение поиска по коду, с помощью индексации текста проекта - это очень
важно для больших проектов. На практике это секунда любого поиска по 100Мб текста .
Восприятие IDE проекта, как единого целого. В частности самая популярная фича - в
коде написано что-то вроде $obj->doSomething() (PHP) ctrl+click на doSomething перебросит
вас к телу этого метода doSomething, или к информации о функции, если она встроенная.
Возможность выбрать настройки для всего проекта, например кодировку.
Подсветка ошибок между несколькими файлами исходников, например вы создаёте метод
в классе , аргументы которого отличаются по типу от аргументов класса-предка. В целом
подсветка богаче - например скроллбар в PHPStorm может очень много сказать о большом
файле с кодом: там отображены ошибки, варнинги, коментарии, TODO, фейлы навигации,
git-изменения от HEAD; это очень помогает обозревать код.
Богатый автокомплит - начинаете набирать название метода/ф-ии/класса/css-класса,
и тут вам точно подсказывают, как-будто за вас знают, что вы хотите сделать. Это очень
удобно, и заодно немного обозревает структуру класса у которого вызывается метод.


В общем примеров ещё много можно привести - у всех них ноги растут из того, что проект
для IDE единое целое, и он его "видит". У текстовых редакторов нет понятия проект -
это ключевое различие.  

Но даже без этого в IDE есть много специфичных полезных фич, например окно "Structure"
описывающее структуру класса, открытого в текущей вкладке, например плагин для работы
с Git из коробки. Не говоря уже о том, что качественную подсветку синтаксиса делают
только специфичные редакторы вроде Notepad++, которые хоть и удобнее использовать как
блокнот - но уже граничат с IDE по функциональности. 

Главная цель IDE - красивенько уместить в вашей голове проект, даже если он большой.
Тогда как редактор, даже навороченный - это прежде всего утилита(помошник), подходящая
для небольших изменений. 

Я например в Notepad++ делаю заметки, смотрю лог ошибок(нотпад сам подтягивает изменения
в файле - удобно), открываю исходники, обособленные от моего основного проекта, а также
копипащу в новые вкладки куски кода - как памятку. В IDE же веду основную работу по
проекту.


Ответ 2

Как один из примеров - это понимание структуры ООП. Сейчас я изучаю PHP и пользуюсь
netbeans. IDE автоматом подставляет разные значение и подтягивает различные методы
из другим файлов, как пример методы из абстрактных классов. При имплементации появляется
значок предупреждения о необходимости перегрузки методов.
Используя IDE удобно передвигатся по коду, особенно в этом помогут всплывающие подсказки,
когда по одному клику перебросит на другой файл с тем же абстрактным классом. 
IDE понимает и анализирует код на ходу, что дает возможность исправить ошибки, не
запуская браузер.
Конечно, на маленьких проектах в несколько сот строчек кода хватит возможностей текстового
редактора. В других случаях IDE будет незаменима, особенно при написании ООП кода

Вложенные селекторы влияют на скорость загрузки сайта?

#css #sass

Есть sass:

#header {
    @include position(fixed, 0 null null 0);
    width: 326px;
    height: 100%;
    background-color: #1F1916;
    text-align: center;

    .top {
        @include position(absolute, 0 null null 0);
        width: 100%;

        .logo {
            background-color: #fff;
            display: block;
            padding: 50px 0 44px;

            img {
                width: 185px;
                height: 71px;
            }
        }
    }

    .bottom {
        @include position(absolute, null null 0 0);
        width: 100%;
    }
}


В результате:

#header .top .logo img {}


Влияет ли это на что-то, если да - то в какую сторону? 
    

Ответы

Ответ 1

#header .top .logo img {}


Браузер читает селекторы справа налево. Т.е. браузер выберет все картинки, потом
узнает у которых у них есть родитель с классом .logo, потом с классом .top... Ну вы поняли.


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


Использование id в css - не круто. Да и такие селекторы типа #header .top .logo img
- имеют очень большой "вес". Их будет трудно "перебить" в каскаде стилей ниже.


Советую Вам почитать про методики написания классов, например, БЭМ. А также установить
линтер, например, SCSS-Lint.


Ответ 2

Старайтесь избегать больших вложенности,  код плохо читается, лучше давайте класс
для img. Опять же, большие вложенности, большой размер файла css, как-то так.


Ответ 3

Поскольку конечный CSS, как я предполагаю, будет минифицирован (до полной нечитаемости),
значимой разницы нет.
Разница, скажем, в 10 кБ (достаточно большой объем для css файла) совершенно несущественна
(при загрузке занимает порядка миллисекунды при нормальном интернете и незаметна даже
при dial-up).

Как в scss/sass импортировать не весь файл, а один стиль запретить?

#css #bootstrap #sass #scss

В bootstrap есть стиль для ссылок и кнопок, выделение точками вокруг элемента + цвет
+ подчеркивание на событии :focus, выглядит это так:

a {
  color: $link-color;
  text-decoration: none;

  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }

  &:focus {
    @include tab-focus;
  }


и

@mixin tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}


Если outline: none; еще можно сделать после импорта .scss в своем файле, но что делать
с цветом и подчеркиванием, если нужно, чтобы цвет и подчеркивание сохранялись те, что
и были, то есть если была синяя ссылка с подчеркиванием, то при клике она должна оставаться
такой же. Если же прописать конкретный цвет и подчеркивание, то для другой, например
красной ссылки без подчеркивания, она будет изменяться, а не оставаться собой.

То есть, нужно вообще не импортировать эти стили или как то удалить их после импорта.
Ведь редактировать исходники .scss неправильно? Тогда как удалить все :focus ы? 
    

Ответы

Ответ 1

В данном случае необходимо писать свой миксин наподобие 
@mixin tab-focus(), только с указанием параметров, которые вы сможете указывать для
конкретных классов.
получается

@mixin tab-focus($outline_dotted, $outline_offset, $outline_size ) {
  outline: $outline_dotted;
  // WebKit
  outline: $outline_size ;
  outline-offset: $outline_offset
}

a{
&:focus {
    @include tab-focus('none', '-2px', '5px');
  }
}

Не подсвечивается sass синтаксис в Sublime Text

#css #sublime_text #sass

Установил Ruby, потом делал по инструкции через командную строку:


gem install sass
gem install compass
d:
cd FrontEnd - папка моего проекта
compass init

Все эти операции проделал, появились папки, файлы в моем проекте. Зашел в папку sass/screen.scss
и тут возникли проблемы, Sublime видит его как обычный блокнотовский документ, то есть
расширение scss открыто через "All Files" - искал расширение .scss - не нашел. Что
я только не пробовал делать, не получается исправить эту проблему.
Вышлю для наглядности скрин



    

Ответы

Ответ 1

для подстветки нужен плагин Sass для сублайма
https://packagecontrol.io/packages/Sass

Конвертация SCSS в SASS

#вёрстка #sass #scss #map #препроцессор

Большой проект, написан на SASS и использованием синтаксиса SASS, а не SCSS. Поэтому
изменить файл на SCSS не вариант, так как их очень много. 

Нужно использовать ассоциативные массив(map) подобного вида:

$primary-colors: (
  "red":   "#ff0000",
  "green": "#00ff00",
  "blue":  "#0000ff"
);


Это синтаксис SCSS, а мне нужен SASS. На конструкцию такого вида компилятор ругается:


  Error: unclosed parenthesis
  
  on line 394 of style/_intro-val.sass
  
  $primary-colors: ( {    ----------------^


Как исправить написание? Кто-нибудь сталкивался с такой проблемой? Может быть заменить
скобку на какой-то другой символ или отступ определенный должен быть?
    

Ответы

Ответ 1

Нашла решение! Синтаксис SASS не поддерживает многострочность, это конечно портит
простоту отладки кода и наглядность, однако проблема была решена вот так:

$primary-colors: ("red": "#ff0000", "green": "#00ff00", "blue": "#0000ff");


Возможно кому-то пригодится.

Как вносить изменения в скомпиллированный файл sass?

#css #css3 #gulp #sass

"use strict";

var gulp = require("gulp");
var rename = require("gulp-rename");
var plumber = require("gulp-plumber");
var sourcemap = require("gulp-sourcemaps");
var sass = require("gulp-sass");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var csso = require("gulp-csso");
var imagemin = require("gulp-imagemin");
var webp = require("gulp-webp");
var svgstore = require("gulp-svgstore");
var posthtml = require("gulp-posthtml");
var include = require("posthtml-include");
var del = require("del");
var server = require("browser-sync");

gulp.task("clean", function () {
  return del("build");
});

gulp.task("copy", function () {
  return gulp.src([
    "source/css/**",
    "source/fonts/**/*.{woff,woff2}",
    "source/img/**",
    "source/js/**"
 ], {
 base: "source"
 })
 .pipe(gulp.dest("build"));
});

gulp.task("css", function () {
  return gulp.src("source/sass/style.scss")
    .pipe(plumber())
    .pipe(sourcemap.init())
    .pipe(sass())
    .pipe(postcss([
      autoprefixer()
    ]))
    .pipe(csso())
    .pipe(rename("style.min.css"))
    .pipe(sourcemap.write("."))
    .pipe(gulp.dest("build/css"))
    .pipe(server.stream());
});

gulp.task("sprite", function () {
 return gulp.src("source/img/sprite/*.svg")
  .pipe(svgstore({
    inlineSvg: true
  }))
  .pipe(rename("sprite.svg"))
  .pipe(gulp.dest("build/img"));
});

gulp.task("html", function () {
 return gulp.src("source/*.html")
  .pipe(posthtml([
    include()
  ]))
 .pipe(gulp.dest("build"));
});

gulp.task("server", function () {
  server.init({
    server: "build"
  });

  gulp.watch("source/sass/**/*.{scss,sass}", gulp.series("css", "refresh"));
  gulp.watch("source/img/sprite/*.svg", gulp.series("sprite", "html", "refresh"));
  gulp.watch("source/*.html", gulp.series("html", "refresh"));
});

gulp.task("refresh", function (done) {
  server.reload();
  done();
});

gulp.task("images", function () {
  return gulp.src("source/img/**/*.{png,jpg,svg}")
  .pipe(imagemin([
    imagemin.optipng({optimizationLevel: 3}),
    imagemin.jpegtran({progressive: true}),
    imagemin.svgo()
  ]))

  .pipe(gulp.dest("source/img"));
});

gulp.task("webp", function () {
  return gulp.src("source/img/**/*.{png,jpg}")
  .pipe(webp({quality: 90}))
  .pipe(gulp.dest("source/img"));
});

gulp.task("build", gulp.series(
  "clean",
  "copy",
  "css",
  "sprite",
  "html"
));

gulp.task("start", gulp.series("build", "server"));




Я написала стили в sass, командой npm run build стили скомпиллировались. А дальше
я хочу внести изменения в стили и чтобы эти изменения увидеть мне нужно каждый раз
выполнять команду npm run build?
    

Ответы

Ответ 1

Для этого есть livereload https://www.npmjs.com/package/gulp-livereload

И еще желательно поставить browser-sync

Нужно только сконфигурировать. после конфигурации можно писать код и он будет тут
же отображаться. Не рекомендую пользоваться такими костылями как Koala и т.д., особенно
если вы хотите профессионально работать разработчиком.  

Вот пример gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');

var reload      = browserSync.reload;

gulp.task('sass', function () {
  gulp.src('./media/css/mainstyle.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(plumber())
    .pipe(reload({stream:true}))
    .pipe(gulp.dest('./media/css'));
});

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: "./"
    },
    port: 8080,
    open: true,
    notify: false
  });
});

gulp.task('html', function(){
  gulp.src('./index.html')
  .pipe(reload({stream:true}));
});

gulp.task('server', function () {
  gulp.watch('./media/css/mainstyle.scss', ['sass']);
  gulp.watch('./index.html', ['html']);
});

gulp.task('default', ['server', 'browserSync']);

Последовательная задержка на Sass для дочерних элементов?

#html #css #sass #scss

Всем привет! Как с помощью Sass создать из этого более изящное решение для последовательного
увеличения transition-delay у дочерних элементов?

Вот, чтобы как в примере ZOE - последовательно показывались иконки соц.сетей.
Пример - пункт Zoe.

.myClass {
  &:nth-child(1) {
    transition: all 1s ease-out 0.5s;
  }
  &:nth-child(2) {
    transition: all 1s ease-out 0.7s;
  }
  &:nth-child(3) {
    transition: all 1s ease-out 0.9s;
  }
  &:nth-child(4) {
    transition: all 1s ease-out 1.1s;
  }
  &:nth-child(5) {
    transition: all 1s ease-out 1.3s;
  }
}

    

Ответы

Ответ 1

В Sass существует директива управления - @for. Её можно использовать для таких задач.
(Рабочий пример на Codepen.io).

Sass:

//Создаём переменные для управления значениями
$items: 4
$transition: 500ms

//Каждому элементу будет прибавлять по 0.060s
@for $i from 0 through $items 
  &:nth-child(#{$i + 1}) 
    transition-delay: $transition+(60ms*($i))


Компилированная версия:



* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper:hover .item {
  transform: translateY(50px);
  background-color: crimson;
}

.item {
  width: 100px;
  height: 100px;
  background-color: tomato;
  transition: 500ms;
}

.item:nth-child(1) {
  transition-delay: 500ms;
}

.item:nth-child(2) {
  transition-delay: 560ms;
}

.item:nth-child(3) {
  transition-delay: 620ms;
}

.item:nth-child(4) {
  transition-delay: 680ms;
}

.item:nth-child(5) {
  transition-delay: 740ms;
}

  

  

  

  

  

Организация таска компиляции sass в Gulp

#gulp #компиляция #sass #gulp_sass

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

Структура проекта следующая:   

   dev  
     |--component1  // компоненты проекта
     |--component2  
     .....
     |--scss  
       |--base  // базовые подключаемые файлы с миксинами и прочим
       |--elements  // общие для всех страниц элементы оформления (кнопки и т.д.)
       |--componets    
         |--component1     
           |--style.scss     
         |--component2     
          ........    
       |--main.scss    


Собирается все это так:   

app  
   |--component1  // компоненты 
     |--css       // отдельные стили каждого компонента
       |--style.css   
   |--component2   
    .....     
   |--css  // главный css
     |--style.css    


Таск sass для всего этого добра:   

gulp.task('sass', function() {
    return combiner(
        gulp.src([
                    'dev/scss/main.scss' ,
                    'dev/scss/project components/**/*.scss'
        ]),
        debug({title: 'src'}),
        gulpIf(isDevelop, sourcemaps.init()),
        sass( sassOptions ),
        autoprefixer({
                browsers: ['last 4 versions']
            }),
        gulpIf(isDevelop, sourcemaps.write()),
        rename(function (path) {
            path.dirname += '/css';
            path.basename = 'main' ? 'style' : path.basename;
        }),
        gulpIf(!isDevelop, cleanCSS()),
        gulp.dest('app'),
        debug({title: 'dest'})
    ).on('error', notify.onError(function(err){
            return {
                title: 'sass',
                message: err.message
            }
    }))

});


Сейчас при выполнении задачи в папку app помещаются все файлы из папок компонентов
и главный файл стилей, независимо от того модифицировались они или нет. Хотелось бы
что-бы манипуляции производились только с модифицируемыми файлами + непонятен вопрос
с кешированием подключаемых через @import файлов.  

Так же вопрос добавления удаления файлов и переписывания урлов к файлам подключаемым
через css (картинки, шрифты...)    

Буду признателен за подробные ответы и советы по организации таска.
    

Ответы

Ответ 1

В идеале сборка должна быть такая, чтобы скомпилированный файлы, которые будут отдаваться
пользователю, лежали отдельно от исходников и их можно было спокойно удалить при необходимости.
К тому же, это позволит делать дополнительные оптимизации с исходными файлами и не
менять пути в сборке.

Организация стилей

В целом, вы отлично организовали сборку стилей: организовали переменные окружения,
добавили афтопрефиксер. Однако я бы посоветовал создать два отдельных таска для разного
окружения, чтобы исключить дополнительные условия. К тому же, можно было бы в качестве
путей добавить лишь 'dev/scss/main.scss' и в нем же делать @import'ы к остальным файлам.

Также бы посоветовал добавить livereload(), чтобы при изменении файлов ваш локальный
сервер автоматически подгружал все изменения. 

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

Организация картинок

Я бы посоветовал хранить исходные картинки отдельно и переносить их при компиляции
в папку сборки (назовем ее public). Кроме обычного переноса было бы хорошо эти картинки
сжать:

К примеру, картинки можно легко сжать без потери качества только за счет удаление
exif-данных. На реальном сайте можно сократить размер картинок в среднем на 70%, что
на современном сайте равняется примерно 4 МБ. Пример на gulp:

var
    gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    imageminJR = require('imagemin-jpeg-recompress'),
    imageminSvgo = require('imagemin-svgo');

// Optimizing images
gulp.task('imagemin', function() {
    gulp.src('./img/**/*')
        .pipe(imagemin([
            imageminJR({
                method: 'ms-ssim'
            }),
            imageminSvgo({
                plugins: [
                    {removeViewBox: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/img/'))
});


А для браузеров, которые понимают легковесный формат webp (формат разработан Google),
можно сделать еще такой вариант изображений:

var
    gulp = require('gulp'),
    webp = require('gulp-webp');

// Generate Webp
gulp.task('webp', function() {
    gulp.src('./img/**/*')
        .pipe(webp())
        .pipe(gulp.dest('./public/img/'))
});


Организация шрифтов

Тоже самое касается шрифтов, однако их нужно лишь перемещать в public:

// Replace fonts
gulp.task('fonts', function () {
    gulp.src('./fonts/text-font/*')
        .pipe(gulp.dest('./public/fonts/'))
});


Создание иконочного шрифта

Предпочтительней было бы использование иконичного шрифта вместо картинок-спрайтов.
И у этого метода есть ряд преимуществ:


Более меньший вес шрифта, чем спрайта;
Гибкость стилизации через CSS;
Меньший вес CSS;
Гибкий размер и ненадобность создание версий для Retina-дисплеев.


Для генерации иконочного шрифта я бы посоветовал такую комбинацию:

// Generate icon font
gulp.task('iconfont', function() {
    var
        fontName = 'icon-font',
        cssClass = 'i';
    // Исходные SVG-файлы
    gulp.src(['./fonts/icon-font/*.svg'])
        .pipe(iconfontCss({
            fontName: fontName,
            cssClass: cssClass,
            path: './styl/mixins/icon-font.styl',
            targetPath: '../../styl/components/font/icon-font.styl',
            fontPath: '../fonts/'
        }))
        .pipe(iconfont({
            fontName: fontName,
            prependUnicode: true,
            normalize: true,
            formats: ['svg','ttf','woff','woff2']
        }))
        .pipe(gulp.dest('./public/fonts/'));
});


Миски для стилей, который берется из этой строки path: './styl/mixins/icon-font.styl'
будет выглядеть так:

@font-face
    font-family "<%= fontName %>"
    src: url('<%= fontPath %><%= fontName %>.woff2') format('woff2'),
         url('<%= fontPath %><%= fontName %>.woff') format('woff'),
         url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
         url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg')

[class*="i-"]
    position relative
    display inline-block
    width 1em
    height 1em
    &:before
        font 14px '<%= fontName %>'
        font-size inherit
        text-rendering auto
        speak none
        font-variant normal
        text-transform none
        color inherit
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)

<% _.each(glyphs, function(glyph) { %>
.<%= cssClass %>-<%= glyph.fileName %>:before
  content "\<%= glyph.codePoint %>"
<% }); %>


После генерации шрифта все, что вам нужно будет сделать, это подключить сгенированный
CSS к вашему сайту или инглудить его к главному CSS-файлу, а затем использовать таким
образом:




Ответ 2

Для ускорения процесса компиляции в целом, можно начать пользоваться модулем gulp-load-plugins.
При помощи него вам не придется подключать все плагины, даже если они вам не нужны
в данный момент, достаточно подключать их во время выполнения определенного таска.
Т. е. в обычном виде вы запускаете таск styles, а подключаются все плагины — от минификации
картинок до бабель-транспайлера. Этот плагин автоматически собирает содержимое packages.json
и обрезает часть gulp- для использования. В результате, например, использование gulp-uglify
будет выглядеть так:

const $ = require('gulp-load-plugins')()
...
.pipe($.uglify({preserveComments: 'some'}))


Вместо:

const uglify = require('gulp-uglify');
...
.pipe(uglify({preserveComments: 'some'}))




Для ускорения процесса компиляции в частности, а именно таска по обработке стилей,
можно воспользоваться gulp-newer.

Вот примерный код, которым можно воспользоваться. Обратите внимание на строчку .pipe($.newer('.tmp/styles'))
и промежуточное сохранение в папку tmp после работы плагина SASS. Знак $ — это горячее
подключение плагинов при помощи gulp-load-plugins.

gulp.task('styles', () => {
  return gulp.src([
    'app/styles/**/*.scss',
    'app/styles/**/*.css'
  ])
    .pipe($.newer('.tmp/styles'))
    .pipe($.sass({
      precision: 10,
      includePaths: require('node-bourbon').includePaths
    }).on('error', $.sass.logError))
    .pipe($.rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(gcmq())
    .pipe($.if('*.css', $.cssnano({
      discardUnused: false
    })))
    .pipe($.autoprefixer({
      browsers: "last 4 versions"
    }))
    .pipe($.size({title: 'styles'}))
    .pipe(gulp.dest('dist/styles'))
    .pipe(browserSync.stream({match: '**/*.css'}));
});




«непонятен вопрос с кешированием подключаемых через @import файлов» — уточните, что
именно вы имеете в виду. Пока что мне кажется, что эта часть никак не связана с галп-тасками.

«Так же вопрос добавления удаления файлов и переписывания урлов к файлам подключаемым
через css (картинки, шрифты...)» — аналогично, поясните что имеется в виду.

Цвет для псевдоэлемента

#css #sass

Как возможно решить такую проблему? Есть фигура из 3-х css объектов. 



body {
    margin: 50px 20px;
}

.main__item_logo {				
     width: 132px;
     height: 100px;				
     position: relative;
     background: orange;
}	

.main__item_logo:before {
    content: "";
    position: absolute;
    top: -35px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 68px solid transparent;
    border-right: 64px solid transparent;
    border-bottom: 35px solid ;
}

.main__item_logo:after {
    content: "";
    position: absolute;
    bottom: -35px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 68px solid transparent;
    border-right: 64px solid transparent;
    border-top: 35px solid;
}







Необходимо задать значение цвета для псевдоэлементов в строке border-top: 35px solid
<цвет>;.

Возможно ли как-то передать это свойство, чтобы не плодить множество классов?
Есть ли возможность получить значение цвета для псевдоэлемента средствами sass, чистого
css, без использования js из основного элемента?
    

Ответы

Ответ 1

Цвет границы можно наследовать.



body {
    margin: 50px 20px;
}

.main__item_logo {              
    width: 132px;
    height: 100px;              
    position: relative;
    background: blue;
    border-color: blue;
}   

.main__item_logo:before, .main__item_logo:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-left: 68px solid transparent;
    border-right: 64px solid transparent;
}

.main__item_logo:before {
    bottom: 100%;
    border-bottom: 35px solid;
    border-bottom-color: inherit;
}

.main__item_logo:after {
    top: 100%;
    border-top: 35px solid;
    border-top-color: inherit;
}



Ответ 2

1) Задать цвет переменной в SASS, использовать переменную в нужных местах.

2) Если непосредственно внутри элемента не предполагается наличие текста, то можно
указать нужное значение в color и оно унаследуется для цвета границ у псевдоэлементов:



.main__item_logo {
  width: 132px;
  height: 100px;
  position: relative;
  background: #fdcf0a;
  color: #fdcf0a; /* цвет границ берется отсюда */
  margin: 50px 0 0;
}

.main__item_logo:before {
  content: "";
  position: absolute;
  top: -35px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 68px solid transparent;
  border-right: 64px solid transparent;
  border-bottom: 35px solid;
}

.main__item_logo:after {
  content: "";
  position: absolute;
  bottom: -35px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 68px solid transparent;
  border-right: 64px solid transparent;
  border-top: 35px solid;
}



Ответ 3

Улучшеный ответ @br3t (удалены все возможные повторения):



.main__item_logo {
  width: 132px;
  height: 100px;
  position: relative;
  background: currentColor;
  color: #fdcf0a; /* цвет границ берется отсюда */
  margin: 50px 0 0;
}

.main__item_logo:before,
.main__item_logo:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-left: 68px solid transparent;
  border-right: 64px solid transparent;
}

.main__item_logo:before {
  top: 100%;
  border-bottom: 35px solid;
}

.main__item_logo:after {
  bottom: 100%;
  border-top: 35px solid;
}





Чтобы вообще ваша фигура была очень гибкой используйте переменные CSS. Они имеют
хорошую поддержку браузеров (почти всё, кроме IE, даже Edge поддерживает).

Таким образом мы можем, к примеру, удалить повторяющееся значение 35px:



:root {
  --delta_height: 35px;
}

.main__item_logo {
  width: 132px;
  height: 100px;
  position: relative;
  background: currentColor;
  color: #fdcf0a; /* цвет границ берется отсюда */
  margin: 50px 0 0;
}

.main__item_logo:before,
.main__item_logo:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-left: 68px solid transparent;
  border-right: 64px solid transparent;
}

.main__item_logo:before {
  top: 100%;
  border-bottom: var(--delta_height) solid;
}

.main__item_logo:after {
  bottom: 100%;
  border-top: var(--delta_height) solid;
}





Таким же образом мы можем ещё дальше продвинуться в параметризации нашей фигуры,
чтобы мы могли пропорционально масштабировать наш шестиугольник.

Для этого мы будет использовать CSS calc и переменные. Но использование CSS variables
вместе с calc пока возможно только в Chrome и Firefox (см. секцию Nested calc() with
CSS Variables).

Изменяйте значение --r чтобы это увидеть.



:root {
  --r: 64px;
  --delta_height: calc(var(--r) / 2);
  --width: calc(var(--r) * 2);
  --height: calc(var(--width) - var(--delta_height));
}

.main__item_logo {
  width: var(--width);
  height: var(--height);
  position: relative;
  background: currentColor;
  color: #fdcf0a; /* цвет границ берется отсюда */
  margin: var(--delta_height) 0;
}

.main__item_logo:before,
.main__item_logo:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-left: var(--r) solid transparent;
  border-right: var(--r) solid transparent;
}

.main__item_logo:before {
  top: 100%;
  border-bottom: var(--delta_height) solid;
}

.main__item_logo:after {
  bottom: 100%;
  border-top: var(--delta_height) solid;
}

Calc и переменные в SASS

#css #веб_программирование #gulp #sass

Написал переменную. Начинаю представлять ее в calc. Gulp выдает ошибку. Как только
убераю переменню из calc и ставлю обычное число все работает.
    

Ответы

Ответ 1

Что б использовать переменную в значении обычного CSS нужно заключить переменную
в #{}, Например:

top: calc(#{$border_padding} - 3px);


Вот ссылка на документацию

Как увеличить сочность цвета (scss)?

#html #css #sass #scss

Допустим имеется цвет #ff7fa1, как средствами scss:


Увеличить его сочность до максимального уровня #ff0044?
Уменьшить его сочность до минимального уровня #ffffff?







    

Ответы

Ответ 1

Можно обратиться к цветовой схемеhsl

При этом максимальная сочность цвета будет при значении 50% для l компоненты и минимальная
(белый цвет) - при значении 100%.

В SASS есть функция получения l компоненты: lightness($color)

А также функции для изменения этой компоненты:


lighten($color, $amount)
darken($color, $amount)


Таким образом для решения пункта два, нужно дополнить значение компоненты до 100,
а для решения первого пункта в случае если текущее значение больше 50 - уменьшить,
в противном случае - увеличить до 50.

Пример использования: 

.c1{
  color: lighten($color, 100-(lightness($color)));
}

.c2{
  $l : lightness($color);
  color: if($l > 50, darken($color, ($l)-50), lighten($color, 50-($l)));
}


При $color: #ff7fa1 преобразуется в следующее:

.c1 {
  color: white;
}

.c2 {
  color: #ff0044;
}


используется функция if