Automatic SASS-to-CSS compiling for Laravel 4 (and any other framework too), config-free, in pure PHP, works with latest SASS 3.2 .scss syntax, imports and mixins

Overview

laravel-sass

Automatic Sass-to-CSS compiling for Laravel 4 (and any other framework by the way) while being in development. Every time you run your app (hitting index.php) laravel-sass will automatically compile all .scss files in your scss folder to .css files in your css folder. Support latest version of Sass (scss syntax) and mixins. Boom!

Installation & Usage

Add this to your composer.json, please note that this is a require-dev, not a normal require. This devides real dependencies from ones you only need for local development.

"require-dev": {
    "panique/laravel-sass": "1.0"
}

Add this line into your public/index.php in Laravel, right before $app->run();.

SassCompiler::run("scss/", "css/");

The first parameter is the relative path to your scss folder (create one) and the second parameter is the relative path to your css folder. Usually it totally makes sense to create those folders in the public folder. Make sure PHP can write into the css folder by giving the folder sudo chmod -R 777 public/css (when being in /var/www). Note: 777 is just for development, in a production server there's no need to give that folder any write-rights.

Install or update your Composer dependencies to add laravel-sass by doing composer install or composer update. Composer automatically installs everything in require-dev by default.

IMPORTANT: When you later deploy your application and don't want to install the require-dev stuff, then do composer install --no-dev (or composer update --no-dev).

Optional feature

There's an optional third parameter for SassCompiler::run() that expects one of the strings explained on http://leafo.net/scssphp/docs/#output_formatting. This defines the desired output. scss_formatter is the standard laravel-sass uses, choose scss_formatter_compressed if you need a minimized css file. scss_formatter_nested is for nested output, optimized for readability.

Testing

To test if everything works okay, simply add this to the head of app/views/hello.php: <link rel="stylesheet" type="text/css" href="css/style.css"> and put a file called style.scss in your scss folder. Now run the app and play around with the (s)css rules in your style.scss, after each refresh you should see the changes instantly!

How @import works

The @import of sass rules from other files works now perfectly. Make sure to import the files like it should be: If the file is called _colors.scss and is in the basic scss folder:

@import 'colors';

If the file is called _colors.scss and is in the subfolder modules of the basic scss folder:

@import 'modules/colors';

Read the official docs for more.

When deploying ...

.. then make sure you comment out this line again: SassCompiler::run("scss/", "css/");. Future releases of this tool will have a development/production switch/recognizer.

To use the very latest features of Sass:

Currently php-sass fetches v0.0.14 (August 2014) of leafo/scssphp as a compiler. For latest features you might want a newer version, so have a look here https://github.com/leafo/scssphp/releases and edit the composer.json accordingly.

Used scripts

This tool uses the excellent scssphp Sass compiler. scssphp supports the latest SCSS syntax (3.2.12).

Other projects

License

Licensed under MIT. Totally free for private or commercial projects.

Support

If you think this script is useful, then think about supporting the project by renting your next server at Host1Plus or DigitalOcean.

Comments
  • Sass is compiled even if scss file is unchanged

    Sass is compiled even if scss file is unchanged

    The sass files are compiled on every page load in development which is very slow. Can you accept one of the pull requests that checks filemtime before compiling?

    I'm currently doing this manually but it seems like it should be a standard feature.

    if (App::environment() == 'local' and
        filemtime(public_path().'/scss/app.scss') > filemtime(public_path().'/css/app.css')) {
        SassCompiler::run('scss/', 'css/');
    }
    
    opened by AlexBrandes 5
  • [issue] import from other files does not work yet

    [issue] import from other files does not work yet

    I cannot use the mixins, variables and whatever I try to import from another file. I'm trying to mix bootstrap with my code to create semantic HTML, but I always have a compiler error telling me something imported is not working.

    The public/scss/application.scss file is:

    @import 'bootstrap/mixins';
    
    #content-container {
        @include container-fixed();
    }
    

    And inside public/scss/bootstrap/_mixins.scss I have

    // Centered container element
    @mixin container-fixed() {
      margin-right: auto;
      margin-left: auto;
      padding-left:  ($grid-gutter-width / 2);
      padding-right: ($grid-gutter-width / 2);
      @include clearfix();
    }
    

    But it throws the following error:

    Exception
    
    Undefined mixin container-fixed: failed at `@include container-fixed();` line: 4
    

    Am I doing something wrong or is this an issue?

    opened by ranisalt 4
  • added some conditions control

    added some conditions control

    • added parameter $overwrite to control overwrite
    • ignore files that start with _
    • ignore if .css file exist (except if $overwrite is set)

    $overwrite can be controled by debug/develop option on CMS/framework/etc...

    code example on boltCMS:

    SassCompiler::run(
        "scss/",
        "css/",
        "scss_formatter_compressed",
        ($app['config']->get('general/debug') ? True : False) // compile scss only on "debug: true"
    );
    
    opened by jhuss 1
  • [better instalation instructions] I have found a better way to install laravel-sass

    [better instalation instructions] I have found a better way to install laravel-sass

    after te composer step, instead of messing with public/index.php which is a very bad idea, it's better to make a service provider named SassServiceProvider (I am not sure if service provider were meant to do this, but this works) and there:

    namespace App\Providers;
    
    use Illuminate\Support\ServiceProvider;
    use SassCompiler;
    
    class SassServiceProvider extends ServiceProvider
    {
    	/**
    	 * Bootstrap services.
    	 *
    	 * @return void
    	 */
    	public function boot()
    	{
    		if(config('app.debug') == true){
    			SassCompiler::run("../resources/sass/", "css/");
    		}
    	}
    
    	/**
    	 * Register services.
    	 *
    	 * @return void
    	 */
    	public function register()
    	{
    		//
    	}
    }
    

    also remember to register the service provider in config/app.php

    with this, you are sure you will only do stuff when you are not in development, and you are not messing with laravel's core.

    the only bad thing about this solution is that SassCompiler::run() first argument needs to have the ../resources/ at the beginning which is not so bad after all.

    opened by fcolecumberri 3
  • Skipping files '_', overwrite and comparing time, file handling in subfolders

    Skipping files '_', overwrite and comparing time, file handling in subfolders

    Skipping files that begin with '', detection of file modification time and compile only if SCSS is newer than CSS, file handling in subfolders. Sorry guys, I'm new on github and I saw now that skipping files '', overwrite and comparing time has already been done.

    opened by webard 0
  • added some conditions control

    added some conditions control

    • added parameter $overwrite to control(ignore/force) overwrite existing css files
    • ignore if .css file exist (except if $overwrite is set)
    • ignore as standalone files that start with _
    • readme updated

    $overwrite can be controled by debug/develop option on CMS/framework/etc...

    e.g. on boltCMS, I use debug option to enable overwrite

    SassCompiler::run(
        "scss/",
        "css/",
        "scss_formatter_compressed",
        ($app['config']->get('general/debug') ? True : False) // overwrite css only on "debug: true"
    );
    
    opened by jhuss 0
Releases(1.0)
Owner
Chris
5.000+ ★ on GitHub. PHP dev, 10+ years of experience
Chris
This is a plugin written in PHP programming language and running on the PocketMine platform that works stably on the API 4.0.0 platform. It allows you to query some other server information

QueryServer This is a plugin written in PHP programming language and running on the PocketMine platform that works stably on the API 4.0.0 platform. I

Thành Nhân 1 Jul 6, 2022
MyAAC is a free and open-source Automatic Account Creator (AAC) written in PHP

MyAAC is a free and open-source Automatic Account Creator (AAC) written in PHP. It supports only MySQL databases.

Lucas Giovanni 6 Aug 26, 2022
Online All in One PHP Video & Audio Downloader From YouTube,Facebook,Twitter,Pinterest,Instagram,MXtakatak,IPL, Tiktok and 1000+ More Sites too

DLhut Contact me If You Find ANy Bug ... PHP Search and Download any Videos from any site. Online All in One Video & Audio Downloader From YouTube,Fac

Vijay Kumar 4 Nov 8, 2021
Online All in One Video & Audio Downloader From YouTube,Facebook,Twitter,Pinterest,Instagram,MXtakatak,IPL, Tiktok and 1000+ More Sites too

DLhut Contact me If You Find ANy Bug ... PHP Search and Download any Videos from any site. Online All in One Video & Audio Downloader From YouTube,Fac

Vijay Kumar 6 Oct 11, 2021
A Zabbix 5.4 module to group items under Monitoring -> Latest data per Tag as it used to be with Application grouping in previous versions of Zabbix

zabbix-module-latest-data Written according to Zabbix official documentation https://www.zabbix.com/documentation/current/manual/modules A Zabbix 5.4

BGmot 18 Dec 6, 2022
Infopanel is a simple tool getting some information from source. It works basically like a slider that shows only title, image, a little bit description and QR-Code for links.

Infopanel is a simple tool getting some information from source. It works basically like a slider that shows only title, image, a little bit description and QR-Code for links. It has its own GUI for the editing. The GUI provides a very simple role concept. This tool can be used for digital signage, Information panels, News or Events or similar.

null 4 Aug 22, 2022
Apollo-compatible automatic persisted queries, to improve GraphQL network performance.

Automatic Persisted Queries for Magento 2 Apollo-compatible automatic persisted queries, to improve GraphQL network performance.

Daniel Sloof 14 Sep 10, 2022
Customer Relationship Management (CRM) portal using PHP Codeigniter 4 & Tailwind CSS framework.

CRM Portal Customer Relationship Management (CRM) portal using PHP Codeigniter 4 & Tailwind CSS framework. Screenshots User (Dashboard) Admin (Employe

Dawood Khan Masood 5 Feb 2, 2022
ZAP CRM is Customer Relationship Management portal built using PHP Codeigniter 4 & Tailwind CSS framework.

ZAP CRM ZAP CRM is Customer Relationship Management portal built using PHP Codeigniter 4 & Tailwind CSS framework. Screenshots User (Dashboard) Admin

Dawood Khan Masood 5 Feb 2, 2022
Free, open-source, online appointments platform based on Laravel PHP Framework.

timegrid (Archived) Timegrid helps contractors and customers to find the perfect meeting time through online appointments. Features Built with Laravel

timegrid.io 880 Dec 19, 2022
Integration of the popular Bootstrap CSS framework for CodeIgniter 4

Tatter\Bootstrap Integration of the popular Bootstrap CSS framework for CodeIgniter 4 Description This library leverages Tatter\Assets to automate ass

Tatter Software 1 Nov 27, 2021
DomainMOD is an open source application written in PHP & MySQL used to manage your domains and other internet assets in a central location

DomainMOD is an open source application written in PHP & MySQL used to manage your domains and other internet assets in a central location. DomainMOD also includes a Data Warehouse framework that allows you to import your web server data so that you can view, export, and report on your live data.

DomainMOD 349 Jan 8, 2023
Emoncms is an open-source web application for processing, logging and visualising energy, temperature and other environmental data and is part of the OpenEnergyMonitor project.

Emoncms is an open-source web application for processing, logging and visualising energy, temperature and other environmental data and is part of the OpenEnergyMonitor project.

Emoncms 1.1k Dec 22, 2022
This is a Task Manager system for managing your task. You can categorize your tasks and upload music to the project And a whole host of other features

taskManager Login and register Each user can have their own task Categorize tasks by creating folders Edit and Delete Folders Search for Tasks Show nu

masoudharooni 11 May 22, 2022
Dynamic photo package for blog posts and other features, integrating CKEditor Smart WYSIWYG

Dynamic Photo Dynamic Photo is a package to assist in integration with CKEditor, a powerful WYSIWYG. With the package it is possible to send photos dy

Michael Frank 7 Jul 18, 2022
DooTask is a lightweight open source online project task management tool that provides various document collaboration tools, online mind mapping, online flowcharting, project management, task distribution, instant IM, file management and other tools.

DooTask is a lightweight open source online project task management tool that provides various document collaboration tools, online mind mapping, online flowcharting, project management, task distribution, instant IM, file management and other tools.

kuaifan 3k Jan 5, 2023
Created simple login system and chat type website using mysql database along with php and html , css and javascript.

Created simple login system and chat type website using mysql database along with php and html , css and javascript.

null 1 Jan 6, 2022
This is a visitor management system, developed by the use of Laravel 8 combined with Jetstream, Livewire and Tailwind CSS.

This is a visitor management system, developed by the use of Laravel 8 combined with Jetstream, Livewire and Tailwind CSS.

Marios Tsouras 0 Apr 23, 2022
A forum created with Laravel, Socket.io, and Tailwind CSS.

A forum created with Laravel, Socket.io, and Tailwind CSS.

Steven Lei 164 Nov 21, 2022