Differences

This shows you the differences between two versions of the page.

--- development:architecture:less [2015/12/14 18:20] – ↷ Page moved and renamed from using_less to development:architecture:less demiankatz
+++ development:architecture:less [2023/04/20 15:50] (current) – [Backup PHP Command Line Compiler (OBSOLETE/NOT RECOMMENDED)] demiankatz
@@ Line 1: / Line 1: @@
-====== Using LESS ======
+====== LESS / SASS ======
-VuFind's bootstrap3 and bootprint3 themes use LESS to compile CSS styles. LESS offers some advantages over pure CSS, since it offers some advanced time-saving features. However, because it has to be compiled to be used, it also adds some extra steps for the developer. This page offers some useful background information and notes on VuFind's use of LESS.
+[[http://lesscss.org/features/|Less]] and [[http://sass-lang.com/|Sass]] are CSS "pre-processors": they include higher level functionality like variables, functions, and nesting on top of CSS and can then be compiled to CSS.
-===== Setup =====
-Write permission needs to be given to a new folder for LESS to work: [theme]/css/less/
-Configure in theme.config.php:
+===== LESS vs. SASS =====
-  "less" => array(
-    "active" => true/false,
-    "compiled.less"
-  ),
-For now, every LESS theme needs a compiled.less which "@import"s a custom theme.less or a parent.less.
+As of this writing, all VuFind® style development is done using LESS; SASS files are programmatically derived from the LESS files using the lessToSass [[development:npm|NPM script]]. While LESS and SASS files should be functionally equivalent, the LESS files are more thoroughly tested and we apologize for any problems with SASS. Please feel free to contribute back to the project if you wish to improve our support of SASS.
+===== Command Line Compilation =====
+Both Less and Sass use [[development:npm|NPM scripts]] for compilation. They both compile to css/compiled.css.
 ===== LESS Theme Inheritance ====
-This is a bit tricky and is still a problem for VuFind we are especially open to for help/suggestions.
-CSS inheritance is pretty straight forward in VuFind: name your CSS file the same if you want to override the parents', different if you want to extend. In LESS, you can import other files into your stylings, which is INSANELY useful for things like the Bootstrap library because of all the variables. Being able to use those variables to color and size things correctly is crucial.
+This is a bit tricky and is still a problem for VuFind®; we are especially open to help/suggestions for making this more straightforward and easier to understand.
+CSS inheritance is pretty straight forward in VuFind®: name your CSS file the same if you want to override the parents', different if you want to extend. In LESS, you can import other files into your stylings, which is VERY useful for things like the Bootstrap library because of all the variables. Being able to use those variables to color and size things correctly is crucial.
 In order to utilize the power of imports and the power of inheritance, here's what's going on in the Bootstrap 3 and Bootprint 3 themes.
 ** Bootstrap3 **
-  'less' => array(
-    'active' => false,
-    'compiled.less'
-  ),
   - compiled.less (only imports bootstrap.less, included in theme.config.php)
     - @import "bootstrap";
@@ Line 34: / Line 28: @@
 ** Bootprint3 **
-  // No custom theme.config.php
   - compiled.less (pulled in instead of bootstrap3/compiled.less, due to inheritance)
     - @import "bootprint";
@@ Line 45: / Line 37: @@
   - icons.less (FA icon overwrites, included in theme.config.php)
-Make sure you have a compiled.less in your theme, as the LESS compiler was not keen on pulling from parent themes. Also, doing so will prevent mulitple Bootstrap instances from being compiled into your final CSS.
+Make sure you have a compiled.less in your theme, as the LESS compiler may have trouble pulling from parent themes. Also, doing so will prevent multiple Bootstrap instances from being compiled into your final CSS.
+===== Active Compilation (OBSOLETE/NOT RECOMMENDED) =====
+:!: This feature was removed in VuFind® 9.0, and its use is strongly discouraged -- the built-in PHP-based LESS compiler did not generate output consistent with the Node.js LESS compiler, and this had a high potential for causing problems.
+Active compilation can be used to automatically compile from Less to CSS when a page loads. This is very useful for development.
+Write permission needs to be given to a new folder for LESS to work: [theme]/css/less/
+Configure in theme.config.php:
+  "less" => array(
+    "active" => true/false,
+    "compiled.less"
+  ),
+For now, every LESS theme needs a compiled.less which "@import"s a custom theme.less or a parent.less.
+===== Backup PHP Command Line Compiler (OBSOLETE/NOT RECOMMENDED) =====
+:!: Note that the [[development:npm|build:css NPM script]] is the preferred means of compiling LESS files for VuFind®, and the older PHP compiler may produce inconsistent results in some situations. The PHP compiler is deprecated as of VuFind® 8.0 and was removed in VuFind® 9.0.
-===== LESS Command Line Compiler =====
   php util/cssBuilder.php
@@ Line 55: / Line 66: @@
 ---- struct data ----
+properties.Page Owner :
 ----