golang Sass项目管理和精灵图功能扩展插件Wellington的使用

Golang Sass项目管理和精灵图功能扩展插件Wellington的使用

Wellington是一个为Sass项目添加精灵图功能的工具，它基于高效的libsass编译器，无需学习新工具，所有功能直接在Sass中实现。

Circle CI

主要功能

Wellington专注于提升Sass项目的开发效率和速度，它扩展了Sass语言，包含了一些核心语言目前无法实现的精灵图和图像操作功能。

示例代码

// 创建精灵图映射
$images: sprite-map("sprites/*.png");

div {
  // 获取精灵图中特定图像的宽度和高度
  width: image-width(sprite-file($images, "cat"));
  height: image-height(sprite-file($images, "cat"));
  // 设置背景为精灵图中的特定图像
  background: sprite($images, "cat");
}

编译后的CSS输出：

div {
  width: 140px;
  height: 79px;
  background: url("genimg/sprites-wehqi.png") 0px 0px;
}

性能优势

Wellington在大型Sass项目中的表现非常出色：

# 40,000行代码的Sass项目，包含1200张图片
wt         3.679s
compass   73.800s
# 速度提升20倍！

安装方法

通过Homebrew安装（macOS）

brew install wellington
wt -h

从源代码构建

  1. 安装Go并将$GOPATH/bin添加到$PATH中
  2. 运行以下命令：
go get -u github.com/wellington/wellington/wt
# 现在wt应该已经在你的PATH中
wt -h

使用Docker容器

docker run -v $(pwd):/data -it drewwells/wellington wt compile proj.scss

可用命令

Wellington提供以下主要命令：

$ wt -h

Available Commands:
  serve       Starts a http server that will convert Sass to CSS
  compile     Compile Sass stylesheets to CSS
  watch       Watch Sass files for changes and rebuild CSS

Flags:
  -b, --build="": Path to target directory to place generated CSS
  -d, --dir="": Path to locate images for spriting and image functions
  -p, --proj="": Path to directory containing Sass stylesheets
  -s, --style="nested": nested style of output CSS
                        available options: nested, expanded, compact, compressed

使用示例

以下是一个完整的Wellington使用示例：

  1. 首先创建项目结构：
myproject/
├── scss/
│   └── styles.scss
└── sprites/
    ├── cat.png
    └── dog.png
  1. 在styles.scss中添加精灵图代码：
// 导入精灵图
$animals: sprite-map("sprites/*.png");

// 使用精灵图
.animal {
  display: inline-block;
  background-repeat: no-repeat;
  
  &.cat {
    width: image-width(sprite-file($animals, "cat"));
    height: image-height(sprite-file($animals, "cat"));
    background: sprite($animals, "cat");
  }
  
  &.dog {
    width: image-width(sprite-file($animals, "dog"));
    height: image-height(sprite-file($animals, "dog"));
    background: sprite($animals, "dog");
  }
}
  1. 使用Wellington编译Sass：
wt compile -p scss -d sprites -b css scss/styles.scss
  1. 编译完成后，你会在css目录中找到生成的CSS文件，以及在genimg目录中找到自动生成的精灵图。

操作系统支持

Wellington提供Linux和macOS的二进制文件。从源代码构建可以在任何支持libSass的操作系统上运行。由于问题#160，Windows支持已被取消。

与构建工具集成

Wellington可以与Grunt或Gulp等构建工具集成：

  • Grunt示例
  • Gulp示例

Wellington是一个强大的工具，特别适合需要处理大量图像和精灵图的大型Sass项目。它的高效性能可以显著提升开发体验。


更多关于golang Sass项目管理和精灵图功能扩展插件Wellington的使用的实战教程也可以访问 https://www.itying.com/category-94-b0.html

1 回复

更多关于golang Sass项目管理和精灵图功能扩展插件Wellington的使用的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


Wellington: Go语言实现的Sass项目管理和精灵图插件

Wellington是一个用Go语言编写的Sass编译工具，它扩展了Sass的功能，特别提供了强大的精灵图(Sprite)生成功能。下面我将详细介绍Wellington的使用方法和示例代码。

安装Wellington

首先需要安装Wellington：

go get github.com/wellington/wellington

或者下载预编译的二进制文件：

# Mac OS X
curl -L https://github.com/wellington/wellington/releases/download/v1.0.4/wt_darwin_amd64 -o /usr/local/bin/wt
chmod +x /usr/local/bin/wt

# Linux
curl -L https://github.com/wellington/wellington/releases/download/v1.0.4/wt_linux_amd64 -o /usr/local/bin/wt
chmod +x /usr/local/bin/wt

基本使用

Wellington的基本命令格式：

wt compile [输入文件] [选项]

常用选项：

  • -b 或 --build：指定构建目录
  • -p 或 --path：指定Sass文件查找路径
  • -i 或 --include：包含路径
  • --gen：生成精灵图

精灵图功能

Wellington的核心功能之一是精灵图生成。它通过Sass函数和混合宏实现精灵图功能。

基本精灵图使用

  1. 首先创建图片目录，例如images/sprites/

  2. 在Sass文件中使用精灵图：

// 导入精灵图模块
@import "sprite/*.png";

// 使用精灵图
.icon {
  @include sprite($sprite-name);
}

精灵图配置

Wellington支持多种精灵图配置：

// 设置精灵图间距
$sprite-spacing: 10px;

// 设置精灵图布局方式 (horizontal, vertical, diagonal, smart)
$sprite-layout: smart;

// 禁用缓存
$disable-cache: true;

项目结构示例

一个典型的Wellington项目结构：

project/
├── scss/
│   ├── main.scss
│   └── _sprites.scss
├── images/
│   └── sprites/
│       ├── icon1.png
│       └── icon2.png
└── public/
    ├── css/
    └── images/

完整示例

1. 创建Sass文件 (scss/main.scss)

// 导入精灵图
@import "sprite/*.png";

// 定义样式
.icon-home {
  @include sprite($sprite-home);
  background-repeat: no-repeat;
}

.button {
  @include sprite($sprite-button);
  &:hover {
    @include sprite-position($sprite-button-hover);
  }
}

2. 编译命令

wt compile scss/main.scss -b public/css --gen public/images

3. 监听文件变化自动编译

wt watch scss/main.scss -b public/css --gen public/images

高级功能

自定义精灵图名称

@import "sprite/*.png" {
  $sprite-namespace: "custom-";
}

.custom-icon {
  @include sprite($custom-home);
}

视网膜(Retina)支持

$sprite-retina: true;

.icon {
  @include retina-sprite($sprite-home);
}

生成精灵图映射

@import "sprite/*.png" {
  $sprite-maps: true;
}

$sprite: sprite-map("sprite/*.png");
.icon {
  background: sprite($sprite, home);
}

与构建工具集成

使用Makefile

CSS_DIR = public/css
IMG_DIR = public/images
SCSS = scss/main.scss

build:
    wt compile $(SCSS) -b $(CSS_DIR) --gen $(IMG_DIR)

watch:
    wt watch $(SCSS) -b $(CSS_DIR) --gen $(IMG_DIR)

使用Gulp

const gulp = require('gulp');
const wt = require('gulp-wellington');

gulp.task('sass', function() {
  return gulp.src('scss/*.scss')
    .pipe(wt({
      build: 'public/css',
      gen: 'public/images'
    }))
    .pipe(gulp.dest('public/css'));
});

性能优化

Wellington在大型项目中的性能优化建议：

  1. 使用--prod选项进行生产环境编译
  2. 合理组织Sass文件结构，避免过度嵌套
  3. 对不常变化的精灵图使用缓存
  4. 使用watch模式开发时，只监听必要的文件

常见问题解决

  1. 图片路径问题：确保图片路径相对于Sass文件正确
  2. 编译错误：检查Sass语法和Wellington版本兼容性
  3. 精灵图不更新：尝试清除缓存$disable-cache: true;
  4. 性能慢：减少同时监听的文件数量

Wellington作为一个用Go实现的Sass工具，结合了Sass的强大功能和精灵图自动生成的便利性，特别适合需要大量使用精灵图的前端项目。它的编译速度通常比Ruby Sass更快，且更容易集成到现代构建流程中。

回到顶部