By Sails.js Tech Brasil

Sails com CSS / Less

O Sails possui uma maneira muito prática de trabalhar com arquivos CSS, em que é possível ao programador tanto adicionar grandes e complexas bibliotecas CSS quanto implementar estilos personalizados, caso a caso. O framework, automatiza o trabalho de adicionar as referências de localização dos estilos pra você por meio das Tasks (Tarefas) Sails:.

As Tasks (Tarefas) Sails:
o diretório /tasks contém um conjunto de tarefas Grunt e suas configurações. As tarefas são úteis principalmente para agregar partes fixas do front-end (como folhas de estilo, scripts, modelos de marcação do lado do cliente), mas também podem ser usadas para automatizar todos os tipos de tarefas de desenvolvimento repetitivas, desde a compilação do browserify até as migrações de banco de dados.

Um arquivo de task em especial é o /tasks/pipeline.js, um local onde você organizará os ativos (assets) que serão injetados em suas exibições de tela. A parte do pipeline.js que se ocupa do CSS, já traduzida, pode ser vista abaixo: 


//  ██████╗ ██╗      █████╗ ██╗███╗   ██╗        ██████╗███████╗███████╗
//  ██╔══██╗██║     ██╔══██╗██║████╗  ██║       ██╔════╝██╔════╝██╔════╝
//  ██████╔╝██║     ███████║██║██╔██╗ ██║       ██║     ███████╗███████╗
//  ██╔═══╝ ██║     ██╔══██║██║██║╚██╗██║       ██║     ╚════██║╚════██║
//  ██║     ███████╗██║  ██║██║██║ ╚████║    ██╗╚██████╗███████║███████║
//  ╚═╝     ╚══════╝╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝    ╚═╝ ╚═════╝╚══════╝╚══════╝
//
//  ███████╗██╗██╗     ███████╗███████╗
//  ██╔════╝██║██║     ██╔════╝██╔════╝
//  █████╗  ██║██║     █████╗  ███████╗
//  ██╔══╝  ██║██║     ██╔══╝  ╚════██║
//  ██║     ██║███████╗███████╗███████║
//  ╚═╝     ╚═╝╚══════╝╚══════╝╚══════╝
//
// CSS files to inject as <link> tags, in order.
// (Arquivos CSS para inserção como tag <link>, na ordem em que aparecem)
//
// > Note: if you're using built-in LESS support with default settings,
//   (Observação: se estás utilizando o suporte incorporado LESS como configuração padrão)
// > you'll want to change `assets/styles/importer.less` instead.
//   (precisarás modificar o arquivo 'assets/styles/importer.less' e não este aqui.)
//
var cssFilesToInject = [

  // Bring in `.css` files for themes and style guides (e.g. Bootstrap, Foundation)
  // (Transporta os arquivos '.css' de temas e guias de estilo (ex.: Boostrap, Foundation)
  'dependencies/**/*.css',

  // All of the rest of your custom `.css` files will be injected here,
  // (Todas as demais bibliotecas customizadas em '.css' devem ser inseridas aqui,)
  // in no particular order.  To customize the ordering, add additional
  // (sem nenhuma ordem particular. Para customizar a ordem, descreva-os )
  // items here, _above_ this one.
  // (explicitamente aqui, _abaixo_ deste.)
  'styles/**/*.css'
];

Se existirem aquivos '.css' nestes diretórios, eles serão injetadas em seu HTML como tags <link> entre os comentários
<!--STYLES--><!--STYLES END-->
de qualquer EJS em que apareçam. Exemplo: 

    <% /* Auto-injected «link» tags: */ %>
        <!--STYLES-->
    <link rel="stylesheet" href="/dependencies/bootstrap-4/bootstrap-4.css">
    <link rel="stylesheet" href="/dependencies/fontawesome.css">
    <link rel="stylesheet" href="/styles/importer.css">
        <!--STYLES END-->

Se esta é sua primeira vez aqui, recomendamos a leitura dos conteúdos abaixo antes de continuar:

Adicionando Temas e Guias de Estilo

Basta copiar os arquivos para o diretório /assets/dependencies/!
Por exemplo: podes acessar o sítio https://bootswatch.com/4/ , escolher um tema, e substituir pelo atual diretório bootstrap-x que já existe lá. Desta forma, todo seu Protótipo passará a ter a identidade visual do tema escolhido

Para saber mais como explorar este recurso, visite a página Sails com Bootstrap !

Adicionando um Estilo Customizado

Basta criar um arquivo '.css' (conforme a sintaxe W3C) no diretório assets/style!
Por exemplo: se a classe .pointer { cursor: pointer; } for definida em seu aquivo '.css' criado, então todo o Protótipo conseguirá utilizá-la.

Adicionando com LESS

Se o seu desejo é utilizar bibliotecas prontas de forma unificada, utilize a primeira abordagem (dependencies). Caso deseje criar seus estilos customizados e também de forma unificada, utilize a segunda abordagem (styles). Mas se o seu desejo é criar uma customização especial caso a caso (página por página), então a melhor opção é o recurso do LESS. Como funciona?
O recurso LESS permite a importação de vários estilos '.less' espalhados pelo seu Protótipo em um único arquivo 'importer.css' final, pois, quando estamos codificando estilos específicos e individuais, é melhor mantê-los junto ao HTML (EJS) que os consome, facilitando a manutenção futura.

Para dizer ao Sails onde encontrar o arquivo '.less' que deverá ser incorporado, edite o arquivo assets/styles/importer.less. O arquivo deverá ter o seguinte conteúdo:

 /**
 * importer.less
 *
 * By default, new Sails projects are configured to compile this file
 * from LESS to CSS.  Unlike CSS files, LESS files are not compiled and
 * included automatically unless they are imported below.
 * (Por padrão, novos projetos do Sails são configurados para compilar esse arquivo
 * de LESS para CSS.  Ao contrário dos arquivos CSS, os arquivos LESS não são compilados e
 * incluídos automaticamente, a menos que sejam importados abaixo.)
 *
 * The LESS files imported below are compiled and included in the order
 * they are listed.  Mixins, variables, etc. should be imported first
 * so that they can be accessed by subsequent LESS stylesheets.
 * (Os arquivos LESS importados abaixo são compilados e incluídos na ordem em que
 * eles estão listados.  Mixins, variáveis, etc. devem ser importados primeiro
 * para que eles possam ser acessados por folhas de estilo LESS subsequentes.)
 *
 * Just like the rest of the asset pipeline bundled in Sails, you can
 * always omit, customize, or replace this behavior with SASS, SCSS,
 * or any other Grunt tasks you like.
 * (Assim como o resto do pipeline de estáticos empacotado no Sails, você pode
 * sempre omitir, personalizar ou substituir esse comportamento por SASS, SCSS,
 * ou qualquer outra tarefa do Grunt que você goste.)
 */

// For example:
// (Por exemplo:)
//
// @import 'variables/colors.less';
// @import 'mixins/foo.less';
// @import 'mixins/bar.less';
// @import 'mixins/baz.less';
//
// @import 'styleguide.less';
// @import 'pages/login.less';
// @import 'pages/signup.less';
//
// etc.

A importação '.less' precede a definição de estilos em style/* que por sua vez precede as definições de dependencies/*, respeitando-se as regras de precedência (specificity) de classes definidas no W3C

Atenção!
Sempre será possível adicionar os estilos diretamente em uma tag em especial ou no arquivo '.ejs', como tags <style>, mas como não consideramos uma 'boa prática', não fizemos menção.
Para saber mais:
Início