Посмотрел несколько видео, здесь три по связке sass&compass. Сначала решил повторить примеры из двух роликов "Введение в SASS & Compass" - здесь кратко и понятно изложены основы SASS.
Но оказалось, что сначала надо научиться настраивать compass и попрактиковаться с Bower.
Так что воспользовался видео из предыдущего поста и настроил компиляцию scss -> css, потом add_import_path и подключил normalizer из скачанного последнего foundation.
Получилось с приложениями (хелперы и файлы) слишком длинно. Так что здесь только начало.
Введение в SASS & Compass Обзорное видео самых основных возможностей SASS в приправе с Сompass.
Еще больше обучающих видео и статей на loftblog.ru.
Введение в SASS & Compass - продолжение Продолжаем рассматривать возможности SASS и Compass. В этом уроке узнаем о циклах, условиях, примесях (они же пользовательские функции), и так же затроним организацию SASS файлов.
Установил Jekyll, sass, Compass, потом GUI : Scout, Compass.app, Fire.app и Bourboun - моядподборка ссылок оказалось очень удачной, здесь помимо основных, еще ссылки на GUI под Kompass, онлайн редактор sass (с компиляцией, естественно) - можно хранить заготовки стилей и миксины...
book sass&kompass
Compass Configuration Reference The compass configuration file is a ruby file, which means that we can do some clever things if we want to. But don’t let it frighten you; it’s really quite easy to set up your project.
Symbol – A symbol starts with a colon and has no spaces in it. Symbols are used to represent values where the set of possible values are limited. E.g. :foo or :foo_bar_baz
Start using Foundation the way you want, with more control than ever before. We've made it really easy to install using Compass so you'll need a little bit of knowledge before you get going. Visit the Compass and Sass sites to learn the basics if you don't already know them.
Bower A package manager for the web Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue!
Bower: зачем фронтенду нужен менеджер пакетов Главное отличие npm и Бовера — подход к установке зависимостей пакетов. npm устанавливает зависимости для каждого пакета отдельно, в итоге получается большое дерево пакетов
Сначала установим Bower глобально¶
В одном из видео (ссылка ниже) используется Bower. Я решил установить и кликнул по ссылке "Bower: зачем фронтенду нужен менеджер пакетов"... и наткнулся на "Главное отличие Бовера..." (ссылка выше). И "между делом" наконец-то понял, почему не npm...
F:\stradorusite\bootstrap\atom_with_bootsrap\bootstrap-3.3.6>npm install -g bower
C:\Users\alter_000\AppData\Roaming\npm\bower -> C:\Users\alter_000\AppData\Roaming\npm\node_modules\bower\bin\bower
C:\Users\alter_000\AppData\Roaming\npm
`-- bower@1.7.9
Без опций все просто¶
kompass create compassprojects
Создает паку для исходных файлов, для скомпилированных и конфигурационный файл
tree F:\stradorusite\compassprojects /F
Структура папок тома MYLINUXLIVE
Серийный номер тома: CE7F-8134
F:\STRADORUSITE\COMPASSPROJECTS
│ config.rb
│
├───sass
│ screen.scss
│ print.scss
│ ie.scss
│
└───stylesheets
ie.css
print.css
screen.css
Теперь достаточно один раз запутить и автоматически получать итоговые файлы папке stylesheets
compass watch
при изменении в конфигурационном файле не забыть перезапустить watch
После просмора трех видео попробую далее собрать примеры команд и настроек
gem install compass --pre #Установить нестабильный релиз
kompass create name-of-my project --bare --sass-dir "scss" --css-dir "css"
#--bare не создавать в папках ничего
# по умолчанию было три варианта файлов (screnn,print, ie)
#--sass-dir "scss" задать директорию для исходных файлов (sass)
#--css-dir "css создать директорию для скомпилированных файлов (stylesheets)
Открываем созданную (по умолчанию) папку проекта и заливаем туда foundation¶
F:\stradorusite\compassprojects>bower install foundation
К двум папкам со стилями добавляются подкапки bower_components
F:\stradorusite\compassprojects>tree
Структура папок тома MYLINUXLIVE
Серийный номер тома: CE7F-8134
F:.
├───sass
├───stylesheets
└───bower_components
├───foundation
│ ├───css
│ ├───js
│ │ ├───foundation
│ │ └───vendor
│ └───scss
│ └───foundation
│ └───components
├───jquery-placeholder
├───jquery.cookie
├───fastclick
│ └───lib
├───jquery
│ ├───dist
│ ├───sizzle
│ │ └───dist
│ └───src
│ ├───ajax
│ │ └───var
│ ├───attributes
│ ├───core
│ │ └───var
│ ├───css
│ │ └───var
│ ├───data
│ │ └───var
│ ├───deferred
│ ├───effects
│ ├───event
│ ├───exports
│ ├───manipulation
│ │ └───var
│ ├───queue
│ ├───traversing
│ │ └───var
│ └───var
└───modernizr
├───feature-detects
├───media
└───test
├───caniuse_files
├───js
│ └───lib
└───qunit
F:\stradorusite\compassprojects>
Файлы в папках не показаны, их слишком много
Теперь добавим в конфиг хитрую команду
add_import_path "bower_components/foundation/scss"
После такого добавления все пути надо прописывать относительно этой папки...
Теперь запишем что-нибудь в наши папки¶
%load F:\stradorusite\compassprojects\sass\screen.scss
# %load F:\stradorusite\compassprojects\sass\_test.scss
@mixin box-sizing($box){
-webkit-box-sizing: $box;
-moz-box-sizing: $box;
box-sizing: $box;
}
Перезапускать надо после каждого изменения в конфиге¶
compass watch
compass watch . # работает и с точкой и без, но папку можно указать явно
Приложения (ниже распечатка config.rb)¶
F:\stradorusite\compassprojects>compass help
Usage: compass help [command]
Description:
The Compass Stylesheet Authoring Framework helps you
build and maintain your stylesheets and makes it easy
for you to use stylesheet libraries provided by others.
Donating:
Compass is charityware. If you find it useful please make
a tax deductable donation: http://umdf.org/compass
To get help on a particular command please specify the command.
Primary Commands:
* clean - Remove generated files and the sass cache
* compile - Compile Sass stylesheets to CSS
* create - Create a new compass project
* init - Add compass to an existing project
* watch - Compile Sass stylesheets to CSS when they change
Other Commands:
* config - Generate a configuration file for the provided command line options.
* extension - Manage the list of compass extensions on your system
* frameworks - List the available frameworks
* help - Get help on a compass command or extension
* imports - Emit an imports suitable for passing to the sass command-line.
* install - Install an extension's pattern into your compass project
* interactive - Interactively evaluate SassScript
* sprite - Generate an import for your sprites.
* stats - Report statistics about your stylesheets
* unpack - Copy an extension into your extensions folder.
* validate - Validate your generated css.
* version - Print out version information
Available Frameworks & Patterns:
* compass
- compass/ellipsis - Plugin for cross-browser ellipsis truncated text.
- compass/extension - Generate a compass extension.
- compass/project - The default project layout.
Global Options:
-r, --require LIBRARY Require the given ruby LIBRARY before running commands.
This is used to access compass plugins without having a
project configuration file.
-l, --load FRAMEWORK_DIR Load the framework or extensions found in the FRAMEWORK directory.
-L, --load-all FRAMEWORKS_DIR Load all the frameworks or extensions found in the FRAMEWORKS_DIR d
irectory.
-I, --import-path IMPORT_PATH Makes files under the IMPORT_PATH folder findable by Sass's @import
directive.
-q, --quiet Quiet mode.
--trace Show a full stacktrace on error
--force Allows compass to overwrite existing files.
--boring Turn off colorized output.
-?, -h, --help Show this message
F:\stradorusite\compassprojects>
F:\stradorusite\compassprojects>compass help init
Usage: compass init project_type path/to/project [options]
Description:
Initialize an existing project at the path specified.
Supported Project Types:
* rails
Options:
--using PATTERN A framework's pattern to use when creating the project.
-x, --syntax SYNTAX Specify the syntax to use when generating stylesheets.
One of sass or scss. Defaults to scss.
--prepare Prepare the project by only creating configuration files.
-r, --require LIBRARY Require the given ruby LIBRARY before running commands.
This is used to access compass plugins without having a
project configuration file.
-l, --load FRAMEWORK_DIR Load the framework or extensions found in the FRAMEWORK directory.
-L, --load-all FRAMEWORKS_DIR Load all the frameworks or extensions found in the FRAMEWORKS_DIR d
irectory.
-I, --import-path IMPORT_PATH Makes files under the IMPORT_PATH folder findable by Sass's @import
directive.
-q, --quiet Quiet mode.
--trace Show a full stacktrace on error
--force Allows compass to overwrite existing files.
--boring Turn off colorized output.
-c, --config CONFIG_FILE Specify the location of the configuration file explicitly.
--app APP Tell compass what kind of application it is integrating with. E.g.
rails
--app-dir PATH The base directory for your application.
--sass-dir SRC_DIR The source directory where you keep your sass stylesheets.
--css-dir CSS_DIR The target directory where you keep your css stylesheets.
--images-dir IMAGES_DIR The directory where you keep your images.
--javascripts-dir JS_DIR The directory where you keep your javascripts.
--fonts-dir FONTS_DIR The directory where you keep your fonts.
-e, --environment ENV Use sensible defaults for your current environment.
One of: development (default), production
-s, --output-style STYLE Select a CSS output mode.
One of: nested, expanded, compact, compressed
--relative-assets Make compass asset helpers generate relative urls to assets.
--no-line-comments Disable line comments.
--http-path HTTP_PATH Set this to the root of your project when deployed
--generated-images-path GENERATED_IMAGES_PATH
The path where you generate your images
-?, -h, --help Show this message
F:\stradorusite\compassprojects>
# %load F:\\stradorusite\\compassprojects\\config.rb
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
Приложение - Bower install foundation¶
F:\stradorusite\compassprojects>bower install foundation
bower not-cached https://github.com/zurb/bower-foundation.git#*
bower resolve https://github.com/zurb/bower-foundation.git#*
bower checkout foundation#5.5.3
bower resolved https://github.com/zurb/bower-foundation.git#5.5.3
bower not-cached https://github.com/Modernizr/Modernizr.git#2.8.3
bower resolve https://github.com/Modernizr/Modernizr.git#2.8.3
bower not-cached https://github.com/ftlabs/fastclick.git#>=0.6.11
bower resolve https://github.com/ftlabs/fastclick.git#>=0.6.11
bower not-cached https://github.com/mathiasbynens/jquery-placeholder.git#~2.0.7
bower resolve https://github.com/mathiasbynens/jquery-placeholder.git#~2.0.7
bower not-cached https://github.com/jquery/jquery-dist.git#>= 2.1.0
bower resolve https://github.com/jquery/jquery-dist.git#>= 2.1.0
bower not-cached https://github.com/carhartl/jquery-cookie.git#~1.4.0
bower resolve https://github.com/carhartl/jquery-cookie.git#~1.4.0
bower checkout fastclick#v1.0.6
bower checkout jquery-placeholder#v2.0.9
bower checkout jquery#2.2.3
bower checkout jquery.cookie#v1.4.1
bower checkout modernizr#v2.8.3
bower mismatch Version declared in the json (2.0.8) is different than the resolved one (2.0.9)
bower resolved https://github.com/mathiasbynens/jquery-placeholder.git#2.0.9
bower not-cached https://github.com/jquery/jquery-dist.git#>=1.6
bower resolve https://github.com/jquery/jquery-dist.git#>=1.6
bower checkout jquery#2.2.3
bower resolved https://github.com/carhartl/jquery-cookie.git#1.4.1
bower not-cached https://github.com/jquery/jquery-dist.git#>=1.2
bower resolve https://github.com/jquery/jquery-dist.git#>=1.2
bower resolved https://github.com/ftlabs/fastclick.git#1.0.6
bower checkout jquery#2.2.3
bower resolved https://github.com/jquery/jquery-dist.git#2.2.3
bower resolved https://github.com/Modernizr/Modernizr.git#2.8.3
bower resolved https://github.com/jquery/jquery-dist.git#2.2.3
bower resolved https://github.com/jquery/jquery-dist.git#2.2.3
bower install foundation#5.5.3
bower install jquery-placeholder#2.0.9
bower install jquery.cookie#1.4.1
bower install fastclick#1.0.6
bower install jquery#2.2.3
bower install modernizr#2.8.3
foundation#5.5.3 bower_components\foundation
├── fastclick#1.0.6
├── jquery#2.2.3
├── jquery-placeholder#2.0.9
├── jquery.cookie#1.4.1
└── modernizr#2.8.3
jquery-placeholder#2.0.9 bower_components\jquery-placeholder
└── jquery#2.2.3
jquery.cookie#1.4.1 bower_components\jquery.cookie
└── jquery#2.2.3
fastclick#1.0.6 bower_components\fastclick
jquery#2.2.3 bower_components\jquery
modernizr#2.8.3 bower_components\modernizr
F:\stradorusite\compassprojects>
Приложение - Bower краткая справка¶
F:\stradorusite\bootstrap\atom_with_bootsrap\bootstrap-3.3.6>bower -h
Usage:
bower <command> [<args>] [<options>]
Commands:
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages - and possible updates
login Authenticate with GitHub and store credentials
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
unregister Remove a package from the registry
version Bump a package version
Options:
-f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --loglevel What level of logs to report
-o, --offline Do not hit the network
-q, --quiet Only output important information
-s, --silent Do not output anything, besides errors
-V, --verbose Makes output more verbose
--allow-root Allows running commands as root
-v, --version Output Bower version
--no-color Disable colors
See 'bower help <command>' for more information on a specific command.
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий