Adobe CQ和SASS / SCSS [英] Adobe CQ and SASS/SCSS

问题描述

我想问一下Adobe CQ是否支持SASS / SCSS？有人有经验吗？

解决方案

@diffa是正确的，因为它不支持SASS，但是LESS被接受。如果您不想走LESS路线，那么SASS集成并不难。我们目前正在将SASS / Compass [带有sass模板http://www.archetypecss.com/]与我们的开发堆栈集成。

我们将框架构筑起来正在使用一个非常简单的MVN项目来构建我们的应用程序。在SCSS之前，我们的项目看起来像

  Maven / 
 bundle / 
 / path / to / our / java 
 content / 
 / path / to / our / jcr_root（apps / etc）
  

我们为此项目添加了一个文件夹

Maven /
sass /
config.rb

然后在我们的 Config.rb 中，将SCSS目录设置为目标CSS目录，并在 etc / design 文件夹，这样我们就可以将SCSS保留在我们希望CSS编译到的位置。然后，我们将指南针编译命令连接到我们的构建脚本中。简化的方式类似于：

 罗盘编译
 mvn clean 
 mvn build 
  

如果您不使用maven，则可以在配置中执行相同的操作。 rb 设置src scss / sass文件的正确路径，然后将目标编译目录设置为 / etc 的设计类别p>



我们要做的其他一些事情是从pom.xml中排除scss文件，以便maven可以在已编译的css中构建，然后从版本控制系统中删除已编译的CSS文件。 。这样，我们的团队就可以对scss进行版本控制，而不必担心JCR周围浮动的scss文件什么也不做。

示例工作流程：

1. Dev进行sass更改


2. Dev运行构建脚本


3. Dev检查本地

如果我们不在Maven上，并且使用的是vlt之类的东西，那将是

1. Dev进行了萨斯更改


2. Dev运行指南针编译（或者此时指南针监视可能更合适）


3. Dev运行vlt / pckmgr /在这里执行任何操作


4. 在本地检查Dev

示例文件：

  maven / 
包/ 
 / path / to / javas 
 content / 
 / src / main / content / jcr_root / 
 etc / designs / myproj 
 / css 
 main_styles.sass< = src 
 main_styles.css< =编译为
 maven / 
 config.rb 
 sass_dir = ../cont ent / src / main / content / jcr_root 
 css_dir = ../content/src/main/content/jcr_root 
  

如果您注意到了，我将sass和css目录设置为 jcr_root 。这使我们可以将sass文件放在 jcr_root 中的任何位置（无论它们都在 etc / designs 中还是我们需要特殊的scs在应用程序的组件中，文件将被编译。）

.........

这有点麻烦，但是绝对值得。

I would like to ask if adobe CQ support SASS/SCSS? Has anyone experience with it?

解决方案

@diffa is right in that there is no native support for SASS, however LESS is accepted. If you don't want to go the LESS route, an SASS integration isn't that hard. We are currently using a SASS/Compass [with a sass template http://www.archetypecss.com/] integration with our development stack.

To frame things up we're using a very simple MVN project to build our application. Before SCSS our project looked something like

Maven/
  bundle/
    /path/to/our/java
  content/
    /path/to/our/jcr_root (apps/etc)

We added a folder to this project

Maven/ sass/ config.rb

Then in our Config.rb we set the SCSS directory and target CSS directories to our etc/design folder so, this way we could keep our SCSS where we want our CSS to compile to. We then hooked up the compass compile command into our build script. Which simplified is someting like:

compass compile 
mvn clean
mvn build

If you aren't using maven, you could do the same thing as long as in your config.rb you set the correct paths for your src scss/sass files and then you set the target compile directory to your design category in /etc

Some other things we've done are to exclude scss files from our pom.xml so that maven just builds in the compiled css and then remove our compiled CSS files from our versioning system. This allows our team to version the scss while not having to worry about scss files floating around our JCR doing nothing.

Example Workflow:

1. Dev makes sass changes
2. Dev runs build script
3. Dev checks local

if we were not on Maven and we were using something like vlt it would be something like

1. Dev makes sass changes
2. Dev runs compass compile (or at this point compass watch might be more suitable)
3. Dev runs vlt/pckmgr/whatever here
4. Dev checks on local

Example File:

maven/
  bundle/
    /path/to/javas
  content/
    /src/main/content/jcr_root/
      etc/designs/myproj
        /css
          main_styles.sass  <= src
          main_styles.css   <= compiles to
  maven/
    config.rb
      sass_dir = ../content/src/main/content/jcr_root
      css_dir = ../content/src/main/content/jcr_root

If you notice, I set the sass and css directories to be the jcr_root. This allows us to put sass files anywhere in the jcr_root (whether it's all in etc/designs or we needed special scss in a component in apps, the files will compile).

.........

It's a bit of hook up, but it's definitely worth it.

这篇关于Adobe CQ和SASS / SCSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！