LESSでBootstrapを改造する
以下のようにディレクトリ構成がなっているとする。style.lessってのが自分で書く奴でbootstrapディレクトリの中身はbootstrapリポジトリのlessディレクトリの中身と同じ。
stylesheets |-- bootstrap | |-- accordion.less | |-- alerts.less | |-- bootstrap.less | |-- breadcrumbs.less | |-- button-groups.less | |-- buttons.less | |-- carousel.less | |-- close.less | |-- code.less | |-- component-animations.less | |-- dropdowns.less | |-- forms.less | |-- grid.less | |-- hero-unit.less | |-- labels.less | |-- layouts.less | |-- mixins.less | |-- modals.less | |-- navbar.less | |-- navs.less | |-- pager.less | |-- pagination.less | |-- popovers.less | |-- progress-bars.less | |-- reset.less | |-- responsive.less | |-- scaffolding.less | |-- sprites.less | |-- tables.less | |-- thumbnails.less | |-- tooltip.less | |-- type.less | |-- utilities.less | |-- variables.less | `-- wells.less `-- style.less
そしてstyle.lessは以下のような感じで書く。
@import "bootstrap/bootstrap.less"; // bootstrapを読み込む // 以下はbootstrap/variables.lessのコピペ // 個々の変数の値を改造する // Variables.less // Variables to customize the look and feel of Bootstrap // ----------------------------------------------------- // GLOBAL VALUES // -------------------------------------------------- // Links @linkColor: #08c; @linkColorHover: darken(@linkColor, 15%); // Grays @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff; // Accent colors @blue: #049cdb; @blueDark: #0064cd; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; @orange: #f89406; @pink: #c3325f; @purple: #7a43b6; // Typography @baseFontSize: 13px; @baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @baseLineHeight: 18px; @textColor: @grayDark; // Buttons @primaryButtonBackground: @linkColor; // COMPONENT VARIABLES // -------------------------------------------------- // Z-index master list // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1020; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; // Sprite icons path @iconSpritePath: "../img/glyphicons-halflings.png"; @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; // Input placeholder text color @placeholderText: @grayLight; // Hr border color @hrBorder: @grayLighter; // Navbar @navbarHeight: 40px; @navbarBackground: @grayDarker; @navbarBackgroundHighlight: @grayDark; @navbarLinkBackgroundHover: transparent; @navbarText: @grayLight; @navbarLinkColor: @grayLight; @navbarLinkColorHover: @white; // Form states and alerts @warningText: #c09853; @warningBackground: #fcf8e3; @warningBorder: darken(spin(@warningBackground, -10), 3%); @errorText: #b94a48; @errorBackground: #f2dede; @errorBorder: darken(spin(@errorBackground, -10), 3%); @successText: #468847; @successBackground: #dff0d8; @successBorder: darken(spin(@successBackground, -10), 5%); @infoText: #3a87ad; @infoBackground: #d9edf7; @infoBorder: darken(spin(@infoBackground, -10), 7%); // GRID // -------------------------------------------------- // Default 940px grid @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Fluid grid @fluidGridColumnWidth: 6.382978723%; @fluidGridGutterWidth: 2.127659574%;
コンパイルする場合は
% lessc stlyle.less > style.css
のようにstyle.lessをコンパイルすればいい。
ブラウザでless.jsでそのつどコンパイルする場合は
<head> <link rel='stylesheet/less' href='/path/to/style.less'/> <script src='/path/to/less.js'></script> </head>
もちろん /path/to/bootstrap/bootstrap.less でbootstrap.lessにアクセスできるなければならない。