![]() ![]() ![]() When you start creating your new Sass files debugging what happens in the Moodle core PHP Sass compiler can take a lot of time. $ link-color : theme-color ( "primary" ) ! default $ link-decoration : none ! default $ link-hover-color : darken ($ link-color, 15 %) ! default $ link-hover-decoration : underline ! default Įxample variables form theme/boost/sass/bootstrap/_variables.scss Using grunt to debug Sass compile issues $ body-bg : $ white ! default $ body-color : $ gray-900 ! default // Links // // Style anchor elements. Body // // Settings for the ` ` element. This tool is a great start when migrating your LESS however, after running less2sass to migrate your stylesheets you will need to inspect them and fix them if needed. This can be done manually or with the less2sass tool to translate LESS files into Sass. The LESS and Sass extention languages are different and not compatible, themes using less will have to migrate their stylesheets. ![]() A child theme can extend the Boost Sass files which are usually found in the sass/ folder of the child theme. The Boost theme css is written in the Sass css extention language. ![]() Usually these files are stored in the less/ folder of the child theme. Some child themes of bootstrapbase use LESS to generate their stylesheets. The Bootstrapbase theme css is written in the LESS css extention language. The carousel widget is passed on to the theme/elegance/template/layout_frontpage.mustache template $renderer = $PAGE -> get_renderer ( 'theme_elegance' ) $carousel = new \theme_elegance\output\carousel () $widgets = ( object ) $templatecontext = Ĭode snippet from theme/elegance/layout/frontpage.php These configuration options only apply to theme Bootstrapbase and child themes: For a full list of option is available in the Themes Overview doc page. The theme configuration for Boost based themes do not differ much from Bootstrapbase based themes. In theme Boost all overridden renderers can be found theme/boost/classes/output, in theme Bootstrapbase the overridden renderers are called in /theme/bootstrapbase/renderers.php. The layout files found in theme Bootstrapbase are a combination of php and html. For each of the layout files in theme/boost/layouts/ there is a corresponding layout file in theme/boost/templates. Theme Boost uses Templates to render the main layouts. For information on advanced usage of Sass css see the SCSS doc page. Using the core scssphp compiler allows for the usage of Boost Presets. The compiled css file served to the end user is stored in a Moodle cache and is regenerated each time theme caches are cleared. Child themes need to specify additional stylesheets using the LESS css is compiled using a core grunt task and stored in theme/bootstrapbase/style/moodle.css. The npm package less2sass can be helpful when migrating your less files. There are many other differences between LESS and Sass css-tricks has more information on these differences. The most obvious difference is the way variables are defined LESS uses Sass uses $. LESS uses a different css syntax than Sass. LESS css is used in Bootstrapbase, Boost uses Sass CSS. Bootstrapbase uses Bootstrap version 2.3.3, Boost uses Bootstrap version 4.0.0 (at the time of writing this document). The biggest difference between themes Bootstrapbase and Boost are the included Bootstrap libraries. Key differences Bootstrap version differences
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |